jQuery, cases à cocher et .is (“: checked”)

Lorsque je lie une fonction à un élément de la case à cocher comme:

$("#myCheckbox").click( function() { alert($(this).is(":checked")); }); 

La case à cocher modifie son atsortingbut vérifié avant que l’événement ne soit déclenché. Il s’agit du comportement normal et donne un résultat inverse.

Cependant, quand je fais:

 $("#myCheckbox").click(); 

La case à cocher modifie l’atsortingbut vérifié après le déclenchement de l’événement.

Ma question est la suivante: existe-t-il un moyen de déclencher l’événement click à partir de jQuery, comme le ferait un clic normal (premier scénario)?

PS: j’ai déjà essayé avec sortinggger('click') ;

 $('#myCheckbox').change(function () { if ($(this).prop("checked")) { // checked return; } // not checked }); 

Note: Dans les anciennes versions de jquery, il était correct d’utiliser attr . Maintenant, il est suggéré d’utiliser prop pour lire l’état.

Il y a un contournement qui fonctionne dans jQuery 1.3.2 et 1.4.2 :

 $("#myCheckbox").change( function() { alert($(this).is(":checked")); }); //Trigger by: $("#myCheckbox").sortinggger('click').sortinggger('change');​​​​​​​​​​​​​ 

Mais je suis d’accord, ce comportement semble bogué par rapport à l’événement natif.

En juin 2016 (en utilisant jquery 2.1.4), aucune des autres solutions suggérées ne fonctionnait. La vérification de attr('checked') renvoie toujours undefined et is('checked) renvoie toujours false .

Utilisez simplement la méthode prop:

 $("#checkbox").change(function(e) { if ($(this).prop('checked')){ console.log('checked'); } }); 

Je suis toujours confronté à ce comportement avec jQuery 1.7.2. Une solution simple consiste à différer l’exécution du gestionnaire de clic avec setTimeout et à laisser le navigateur faire sa magie entre-temps:

 $("#myCheckbox").click( function() { var that = this; setTimeout(function(){ alert($(that).is(":checked")); }); }); 

Si vous prévoyez ce comportement indésirable, il serait préférable de passer un paramètre supplémentaire de jQuery.sortinggger () au gestionnaire de clic de la case à cocher. Ce paramètre supplémentaire permet d’informer le gestionnaire de clics que le clic a été déclenché par programme plutôt que par l’utilisateur en cliquant directement sur la case à cocher. Le gestionnaire de clic de la case à cocher peut alors inverser l’état de vérification signalé.

Donc, voici comment je déclencherais l’événement click sur une case à cocher avec l’ID “myCheckBox”. Notez que je transmets également un paramètre d’object à un seul membre, nonUI, défini sur true:

 $("#myCheckbox").sortinggger('click', {nonUI : true}) 

Et voici comment je gère cela dans le gestionnaire d’événements click de la case à cocher. La fonction de gestionnaire vérifie la présence de l’object nonUI comme second paramètre. (Le premier paramètre est toujours l’événement lui-même.) Si le paramètre est présent et défini sur true, j’inverse le statut signalé. Si aucun paramètre de ce type n’est transmis – ce qui ne sera pas le cas si l’utilisateur a simplement cliqué sur la case à cocher dans l’interface utilisateur -, je déclare le statut actuel vérifié.

 $("#myCheckbox").click(function(e, parameters) { var nonUI = false; try { nonUI = parameters.nonUI; } catch (e) {} var checked = nonUI ? !this.checked : this.checked; alert('Checked = ' + checked); }); 

Version JSFiddle à http://jsfiddle.net/BrownieBoy/h5mDZ/

J’ai testé avec Chrome, Firefox et IE 8.

  var asortingb = $('.mycheck').attr("unchecked",true); $('.mycheck').click(function(){ if ($(this).is(":checked")) { $('.mycheck').attr("unchecked",false); alert("checkbox checked"); } else { $('.mycheck').attr("unchecked",true); alert("checkbox unchecked"); } }); 
  $("#checkbox").change(function(e) { if ($(this).prop('checked')){ console.log('checked'); } }); 

Eh bien, pour correspondre au premier scénario, c’est quelque chose que j’ai trouvé.

http://jsbin.com/uwupa/edit

Essentiellement, au lieu de lier l’événement «click», vous liez l’événement «change» à l’alerte.

Ensuite, lorsque vous déclenchez l’événement, vous déclenchez d’abord le clic, puis déclenchez le changement.

En plus de la réponse de Nick Craver, pour que cela fonctionne correctement sur IE 8 vous devez append un gestionnaire de clics supplémentaire à la case à cocher:

 // needed for IE 8 compatibility if ($.browser.msie) $("#myCheckbox").click(function() { $(this).sortinggger('change'); }); $("#myCheckbox").change( function() { alert($(this).is(":checked")); }); //Trigger by: $("#myCheckbox").sortinggger('click').sortinggger('change'); 

Sinon, le rappel ne sera déclenché que lorsque la case à cocher sera désactivée, car IE 8 rest concentré sur les cases à cocher et les radios lorsque l’utilisateur clique dessus.

Je n’ai pas testé sur IE 9 cependant.

 $( "#checkbox" ).change(function() { if($(this).is(":checked")){ alert('hi'); } }); 

Le moyen le plus rapide et facile :

 $('#myCheckbox').change(function(){ alert(this.checked); }); 

 $el[0].checked; 

$ el – est un élément de sélection jquery.

Prendre plaisir!

 if ($.browser.msie) { $("#myCheckbox").click(function() { $(this).sortinggger('change'); }); } $("#myCheckbox").change(function() { alert($(this).is(":checked")); });