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


88

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');


5
Je viens de vérifier cela. Vous avez tout à fait raison. Cela semble être un bug. Je le signalerais
cletus

1
Qu'en est-il de l'événement «changement»?
ZippyV

@cletus En effet, il s'agit d'un bogue Jquery 1.4.2. 1.3.2 fonctionne très bien.
Ben

Je constate le même comportement dans les versions 1.4.2 et 1.3.2: jsfiddle.net/HCUNn
Nick Craver

@Nick Il fait toujours le contraire de ce que ferait un clic de souris normal. Honnêtement, je ne sais pas pourquoi la 1.3.2 fonctionne pour moi et la 1.4.2 ne fonctionne pas, mais cela doit quand même être changé.
Ben

Réponses:


97
$('#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.


1
J'ai essayé cela, "$ (# myCheckbox) .click ()" décoche / coche la case mais la fonction de changement n'est jamais déclenchée. J'ai également essayé de changer l'attribut 'vérifié' au lieu d'appeler click () et même de définir la fonction 'change' sur 'live'.
Ben

@Ben - Vous devez le déclencher d'une manière différente pour que cela s'exécute, voir ma réponse pour l'instruction de déclenchement.
Nick Craver

@Nick Merci, j'accepterai la réponse de tcurdt car il a été le premier à proposer la solution. Idiot moi je n'ai pas déclenché la méthode du «changement».
Ben

19
et pour les versions plus récentes de jquery, la fonction est prop ("vérifié") au lieu de attr ("vérifié") au cas où cela attraperait quelqu'un d'autre.
danski

J'éviterais «prop» en raison de la non-rétrocompatibilité, en particulier. dans IE.
vapcguy

27

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.


10

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');
  }
});

2
is('checked)retournera faux car "vérifié" n'est pas un pseudo-sélecteur CSS. Le bon devrait être is(':checked')donc il recherche ": vérifié" à la place.
dhaupin

4

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"));
    });
});

Oui! Un peu décalé, mais j'ai dû faire la même chose dans les grilles Kendo avec des cases à cocher quand quelqu'un cliquait sur "Ajouter un nouvel enregistrement" si je voulais qu'il soit "Actif" par défaut. Je devais aussi lui donner un temps de 500ms. Ensuite, j'ai dû ajouter .click(), puis définir .attr('value', 'true'), puis .change(), .blur()avant de définir la boîte par programme lorsque je cliquais sur le bouton "Mettre à jour" par programme ....
vapcguy

2

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.


2
<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");
}
});

Quelques commentaires seraient bien
Danil Gaponov

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

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

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

JSFIDDLE


0

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.


0

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.


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

});

1
Veuillez mentionner quelques détails
CodeWarrior

On dirait que c'est juste une réponse répétée, en utilisant à la changeplace des OP click, et utilise simplement une ifinstruction comme une manière différente de tester :checked.
vapcguy

-1

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!


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

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.