Cliquez pour basculer avec jQuery

Question

J'ai utilisé une fonction de survol où vous faites x au survol de la souris et y et le 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 la case à 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 actuel « checked » 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 les DOM 'checked' propriété (par exemple ne pas utiliser attr()-d'extraction l'état actuel de la case à cocher cliqué):

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

... et ainsi de suite.

Note: depuis jQuery 1.6, des cases à cocher doit être définie à l'aide prop pas attr:

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

Answer 2

essayer de le changer:

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

à ceci:

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

pas 100% sûr si cela le faire, mais je crois me souvenir avoir un problème similaire. Bonne chance!

Answer 3

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

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

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

Answer 6

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

Answer 7

Pourquoi ne pas en une ligne?

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

Answer 8

Une autre approche serait de jquery étendu comme celui-ci:

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

appeler ensuite:

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

Answer 9

Attention: l'utilisation attr() ou prop() pour changer l'état d'une case ne feu le ch ange event dans la plupart des navigateurs avec lesquels j'ai testé. L'état vérifié changera mais aucun événement ne bouillonnera. Vous devez déclencher l'événement de modification manuellement après avoir défini l'attribut checked. J'avais d'autres gestionnaires d'événements surveillant l'état des cases à cocher et ils fonctionneraient très bien avec les clics directs de l'utilisateur. Toutefois, la définition de l'état checked par programmation ne déclenche pas systématiquement l'événement change.

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 10

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>) permet de basculer la propriété checked de la case à cocher.

Answer 11

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

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

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 14

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

Answer 15

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

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