web-dev-qa-db-fra.com

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

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

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

La case à cocher change son attribut vérifié avant l'événement est déclenché, il s'agit du comportement normal et donne un résultat inverse.

Cependant, quand je le fais:

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

La case à cocher change l'attribut vérifié après l'événement est déclenché.

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

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

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

Remarque: Dans les anciennes versions de jQuery, il était correct d'utiliser attr. Nous suggérons maintenant d'utiliser prop pour lire l'état.

81
tcurdt

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 buggé par rapport à l'événement natif.

26
Nick Craver

À compter de juin 2016 (avec jQuery 2.1.4), aucune des autres solutions suggérées ne fonctionne. La vérification de attr('checked') renvoie toujours undefined et is('checked) renvoie toujours false. 

Il suffit d'utiliser la méthode prop:

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

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

Je rencontre toujours ce problème 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 son tour dans l'intervalle:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
3
Srđan Stanić
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
2
Superman
<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");
}
});
2
Tejas Soni

Si vous anticipez ce comportement plutôt indésirable, vous devrez alors passer un paramètre supplémentaire de jQuery.trigger () au gestionnaire de clic de la case à cocher. Ce paramètre supplémentaire indique au gestionnaire de clics que le clic a été déclenché par programme, et non par le fait que l'utilisateur clique directement sur la case à cocher. Le gestionnaire de clics de la case à cocher peut ensuite inverser l'état de vérification signalé.

Alors voici comment déclencher l'événement click 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 de clic de la case à cocher. La fonction de gestionnaire vérifie la présence de l'objet non-UI en tant que 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, alors 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 rapporte le statut 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.

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

JSFIDDLE

0
Surya R Praveen

Eh bien, pour faire correspondre le premier scénario, c'est quelque chose que j'ai mis au point.

http://jsbin.com/uwupa/edit

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 devez d'abord cliquer, puis déclencher le changement.

0
RussellUresti

En plus de la réponse de Nick Craver, pour que cela fonctionne correctement sur IE 8, vous 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 son focus, car IE 8 reste actif sur les cases à cocher et les radios lorsque l'utilisateur clique dessus.

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

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

});
0
user3607804