jQuery, cases à cocher et .is (": coché")

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

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

La case à cocher modifie son attribut coché avant que l'événement ne soit déclenché, c'est le comportement normal et donne un résultat inverse.

Cependant, quand je fais:

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

La case à cocher modifie l'attribut coché 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 de clic à partir de jQuery comme le ferait un clic normal (premier scénario)?

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

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

Remarque: dans les anciennes versions de jquery, il était possible de l'utiliser attr. Maintenant, il est suggéré d'utiliserprop pour lire l'état.

Il existe une solution de contournement qui fonctionne dans jQuery 1.3.2 et 1.4.2 :

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

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

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

Depuis juin 2016 (en utilisant jquery 2.1.4) aucune des autres solutions suggérées ne fonctionne. La vérification attr('checked')revient toujours undefinedet is('checked)revient toujours false.

Utilisez simplement la méthode prop:

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

Je rencontre toujours ce comportement avec jQuery 1.7.2. Une solution simple consiste à différer l'exécution du gestionnaire de clics avec setTimeout et à laisser le navigateur faire sa magie en attendant:

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

Si vous prévoyez ce comportement plutôt indésirable, alors un autre serait de passer un paramètre supplémentaire du jQuery.trigger () au gestionnaire de clics de la case à cocher. Ce paramètre supplémentaire consiste à informer le gestionnaire de clics que le clic a été déclenché par programme, plutôt que par l'utilisateur cliquant directement sur la case à cocher elle-même. Le gestionnaire de clics de la case à cocher peut alors inverser l'état de vérification signalé.

Alors, voici comment je déclencherais l'événement de clic sur une case à cocher avec l'ID "myCheckBox". Notez que je passe également un paramètre d'objet avec un seul membre, nonUI, qui est défini sur true:

$("#myCheckbox").trigger('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'objet nonUI comme deuxième 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 l'état .checked 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 - alors je signale l'état réel .checked:

$("#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 sur http://jsfiddle.net/BrownieBoy/h5mDZ/

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

<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.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');
  }
});

$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE

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

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 le changement.

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

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

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

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

Sinon, le rappel ne sera déclenché que lorsque la case à cocher perd le focus, car il IE 8garde le focus sur les cases à cocher et les radios lorsque vous cliquez dessus.

_{Je n'ai pas testé sur IE 9cependant.}

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

});

Le moyen le plus rapide et le plus simple :

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

$el[0].checked;

$ el - est l'élément jquery de la sélection.

Prendre plaisir!

if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

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