jQuery, les cases à cocher et.est ( " : cochée")

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

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

la case à cocher change son attribut avant l'événement est déclenché, c'est le comportement normal, et donne un résultat inverse.

Cependant, quand je fais:

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

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

ma question Est, est y a-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') ;

77
demandé sur Andrew 2010-04-18 02:33:45
la source

12 ответов

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

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

73
répondu tcurdt 2018-06-09 19:07:40
la source

il y a un contournement qui fonctionne à 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.

24
répondu Nick Craver 2010-04-18 03:06:50
la source

en date de juin 2016 (en utilisant jquery 2.1.4) aucune des autres solutions proposées ne fonctionne. En cochant 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');
  }
});
9
répondu atomless 2016-06-13 13:45:45
la source

j'éprouve toujours ce comportement avec jQuery 1.7.2. Une solution simple est de différer l'exécution du gestionnaire de clic avec setTimeout et de laisser le navigateur faire sa magie dans l'intervalle:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});
3
répondu Srđan Stanić 2012-09-05 14:31:31
la source

si vous anticipez ce comportement plutôt indésirable, alors un de ces comportements serait de passer un paramètre supplémentaire du jQuery.trigger () vers le gestionnaire de clics de la case à cocher. Ce paramètre supplémentaire est destiné à informer le gestionnaire de clic que le clic a été déclenché par programmation, plutôt que par l'utilisateur qui clique directement sur la case à cocher elle-même. Le gestionnaire de clics de la case à cocher peut alors Inverser l'état de la vérification.

donc voici comment je déclencherais l'événement de clic sur un case à cocher avec L'ID "myCheckBox". A noter que je suis aussi en passant un paramètre de l'objet avec un seul membre, nonUI, qui est à 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 handler 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 à true, alors j'inverse le rapport .le statut vérifié. Si aucun paramètre est passé dans - ce qu'il n'y aura pas si l'Utilisateur a simplement cliqué sur la case à cocher dans L'UI - puis je déclare le réel .état 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.

2
répondu ChillyPenguin 2012-06-21 09:41:00
la source
<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
répondu Tejas Soni 2015-08-21 15:50:14
la source
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});
2
répondu Superman 2017-02-28 13:52:52
la source

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

http://jsbin.com/uwupa/edit

Essentiellement, au lieu de lier l'événement "click", vous pouvez lier l'événement "change" avec l'alerte.

puis, lorsque vous déclenchez l'événement, vous déclenchez d'abord un clic, puis un changement.

0
répondu RussellUresti 2010-04-18 03:04:29
la source

en plus de la réponse de Nick Craver, pour que cela fonctionne correctement sur IE 8 vous devez ajouter un gestionnaire de clic 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 sa mise au point, car IE 8 garde la mise au point sur les cases à cocher et les radios lorsqu'elles sont cliquées.

N'ont pas testé sur IE 9 cependant.

0
répondu Yuri Ghensev 2012-06-05 04:35:45
la source
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});
0
répondu user3607804 2014-07-01 13:28:12
la source

la Plupart la plus rapide et facile :

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

$el[0].checked;

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

Profitez-en!

-1
répondu Максим К. 2015-04-06 19:02:26
la source
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
-2
répondu user3239648 2014-11-06 10:45:59
la source

Autres questions sur jquery checkbox click ischecked