L’événement de basculement Jquery est en train de jouer avec la valeur de la case à cocher

J’utilise l’événement toggle de Jquery pour faire des choses quand un utilisateur clique sur une case à cocher, comme ceci:

$('input#myId').toggle( function(){ //do stuff }, function(){ //do other stuff } ); 

Le problème est que la case à cocher n’est pas cochée lorsque je clique sur la case à cocher. (Tout ce que j’ai mis dans l’événement toggle fonctionne correctement.)

J’ai essayé ce qui suit:

 $('input#myId').attr('checked', 'checked'); 

et

 $(this).attr('checked', 'checked'); 

et même simplement

 return true; 

Mais rien ne fonctionne. Quelqu’un peut-il me dire où je me trompe?

Edit – merci à tous ceux qui ont répondu. La réponse de Dreas a presque fonctionné pour moi, à l’exception de la partie qui vérifiait l’atsortingbut. Cela fonctionne parfaitement (même si c’est un peu pirate)

 $('input#myInput').change(function () { if(!$(this).hasClass("checked")) { //do stuff if the checkbox isn't checked $(this).addClass("checked"); return; } //do stuff if the checkbox isn't checked $(this).removeClass('checked'); }); 

Merci encore à tous ceux qui ont répondu.

Utilisez l’événement change au lieu de l’événement toggle , par exemple:

 $('input#myId').change(function () { if ($(this).attr("checked")) { //do the stuff that you would do when 'checked' return; } //Here do the stuff you want to do when 'unchecked' }); 

Bien que le gestionnaire d’événement de change proposé par Dreas Grech soit approprié, il ne fonctionne pas bien dans IE 6 et 7, qui ne déclenche pas l’événement de change tant que le focus n’est pas flou (jusqu’à ce que vous cliquiez en dehors de la zone case à cocher). Comme le dit QuirksMode , “c’est un bug sérieux”.

Vous souhaiterez peut-être utiliser le gestionnaire d’événements click , mais cela ne fonctionnera pas avec la navigation au clavier. Vous devez également enregistrer un gestionnaire de keyup

Voir aussi cette question connexe .

Je n’ai pas encore trouvé de solution multi-navigateur prenant en charge les clics de souris et l’activation au clavier des cases à cocher (et ne déclenche pas trop d’événements).


En ce qui concerne votre solution pour vérifier si la case est cochée ou non, au lieu d’append votre propre classe checked , vous pouvez utiliser l’atsortingbut checked de HTML:

 $('input#myInput').change(function () { if ($(this).attr("checked")) { //do stuff if the checkbox is checked } else { //do stuff if the checkbox isn't checked } }); 

N’importe quel navigateur définit l’atsortingbut checked d’un élément d’ input sur la valeur "checked" si la case à cocher est activée et lui atsortingbue la valeur null (ou supprime l’atsortingbut) si la case n’est pas cochée.

pourquoi ne pas utiliser $ .is ()?

 $('input#myId').change( function() { if ($(this).is(':checked')) { // do stuff here } else { // do other stuff here } }); 

Ceci est une réponse de MorningZ (je l’ai trouvé ici ) qui fait totalement sens:

La partie manquante est que “case à cocher” est un object jQuery, pas un object DOM de case à cocher

alors:

checkbox.checked sûr que l’erreur est .checked absence de propriété .checked d’un object jQuery

alors:

checkbox[0].checked fonctionnerait puisque le premier élément d’un tableau jQuery est l’object DOM lui-même.

Donc, dans votre fonction change() , vous pouvez utiliser

 $(this)[0].checked 
 $('input#myId').toggle( function(e){ e.preventDefault(); //do stuff $(this).attr('checked', 'true'); }, function(e){ e.preventDefault(); //do other stuff $(this).attr('checked', 'false'); } ); 

cela a fonctionné pour moi ………… vérifier

 $(":checkbox").click(function(){ if($(this).attr("id").split("chk_all")[1]) { var ty = "sel"+$(this).attr("id").split("chk_all")[1]+"[]"; if($(this).attr("checked")) { $('input[name="'+ty+'"]').attr("checked", "checked"); } else { $('input[name="'+ty+'"]').removeAttr("checked"); } } }) 

J’ai fait une approche similaire mais en utilisant simplement l’atsortingbut vérifié tel que

  //toggles checkbox on/off $("input:checkbox").change( function(){ if(!this.checked){ this.checked=true; } else{ this.checked=false; } } ); //end toggle 
  $("input[type=checkbox][checked=false]")// be shure to set to false on ready $("input#Checkbox1").change(function() { if ($(this).attr("checked")) { $("#chk1").html("you just selected me")//the lable } else {$("#chk1").html("you just un selected me") } }); 

Essayez d’utiliser une fonction autre que jquery:

 function chkboxToggle() { if ($('input#chkbox').attr('checked')) // do something else // do something else } 

puis sous votre forme:

  

Essayer:

 $(":checkbox").click(function(){ if($(this).attr("checked")) { $('input[name="name[]"]').attr("checked", "checked"); } else { $('input[name="name[]"]').removeAttr("checked"); } })