Cliquez télérupteur avec jQuery

Question

Je l'ai utilisé une fonction de vol stationnaire où vous faites x et y passe la souris sur et mouseout. J'essaie la même chose pour un clic, mais il ne semble pas fonctionner:

$('.offer').click(function(){ 
  $(this).find(':checkbox').attr('checked', true ); 
},function(){
  $(this).find(':checkbox').attr('checked', false ); 
});

Je veux que la case à cocher à vérifier en cliquant sur un div et sans contrôle si vous cliquez à nouveau - une bascule de clic

.

Answer 1

Cela se fait facilement en renversant l'état « checked » actuel de la case à cocher sur chaque clic. Exemples:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.attr('checked'));
 });

ou

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox.is(':checked'));
 });

ou, en manipulant directement le DOM 'vérifié' propriété (à savoir de ne pas utiliser attr() chercher l'état actuel de la case cliqué):

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.attr('checked', !$checkbox[0].checked);
 });

... et ainsi de suite.

Note: 1.6 depuis jQuery, cases à cocher doivent être définies à l'aide prop pas attr:

 $(".offer").on("click", function () { 
       var $checkbox = $(this).find(':checkbox');
       $checkbox.prop('checked', !$checkbox[0].checked);
 });

Answer 2

Une autre approche serait de jquery étendue comme ceci:

$.fn.toggleCheckbox = function() {
    this.attr('checked', !this.attr('checked'));
}

Ensuite, appelez:

$('.offer').find(':checkbox').toggleCheckbox();

Answer 3

Attention: l'utilisation de changer l'état d'une case à cocher ne pas déclenche l'événement de changement attr () ou prop () dans la plupart des navigateurs, je l'ai testé avec. L'état vérifié changera, mais aucun cas bouillonnant. Vous devez déclencher l'événement de changement manuellement après avoir défini l'attribut checked. J'ai eu quelques autres gestionnaires d'événements de surveillance de l'état des cases à cocher et ils travailleraient bien avec l'utilisateur clique direct. Cependant, la mise en l'état contrôlé échoue à déclencher par programme toujours l'événement de changement.

jQuery 1.6

$('.offer').bind('click', function(){ 
    var $checkbox = $(this).find(':checkbox');
    $checkbox[0].checked = !$checkbox[0].checked;
    $checkbox.trigger('change'); //<- Works in IE6 - IE9, Chrome, Firefox
});

Answer 4

Vous pouvez utiliser la fonction toggle :

$('.offer').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
}, function() {
    $(this).find(':checkbox').attr('checked', false);
});

Answer 5

Pourquoi ne pas en une ligne?

$('.offer').click(function(){
    $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').attr('checked'));
});

Answer 6

J'ai une seule case à cocher nommée chkDueDate et un objet HTML avec un événement click comme suit:

$('#chkDueDate').attr('checked', !$('#chkDueDate').is(':checked'));

En cliquant sur l'objet HTML (dans ce cas un <span>) vérifier la propriété fait basculer de la case à cocher.

Answer 7

jQuery. Meilleure façon, déléguer les actions à jQuery (jQuery = jQuery)

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
    return !val;
});

Answer 8

essayez de changer ceci:

$(this).find(':checkbox').attr('checked', true ); 

à ceci:

$(this).find(':checkbox').attr('checked', 'checked'); 

pas 100% sûr si cela le faire, mais il me semble rappeler d'avoir un problème similaire. Bonne chance!

Answer 9

$('.offer').click(function(){ 
    if ($(this).find(':checkbox').is(':checked'))
    {
        $(this).find(':checkbox').attr('checked', false); 
    }else{
        $(this).find(':checkbox').attr('checked', true); 
    }
});

Answer 10

JQuery Je ne pense pas que clic () accepte deux fonctions pour basculer. Vous devez utiliser la fonction bascule () pour que: http://docs.jquery.com/Events/toggle

Answer 11

$('.offer').click(function() { 
    $(':checkbox', this).each(function() {
        this.checked = !this.checked;
    });
});

Answer 12

solution la plus simple

$('.offer').click(function(){
    var cc = $(this).attr('checked') == undefined  ? false : true;
    $(this).find(':checkbox').attr('checked',cc);
});

Answer 13

<label>
    <input
        type="checkbox"
        onclick="$('input[type=checkbox]').attr('checked', $(this).is(':checked'));"
    />
    Check all
</label>

Answer 14

Une autre solution alternative à basculer la valeur de case à cocher:

<div id="parent">
    <img src="" class="avatar" />
    <input type="checkbox" name="" />
</div>


$("img.avatar").click(function(){

    var op = !$(this).parent().find(':checkbox').attr('checked');
    $(this).parent().find(':checkbox').attr('checked', op);

});

Answer 15

    $('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});