webentwicklung-frage-antwort-db.com.de

jQuery, Kontrollkästchen und .is (": checked")

Wenn ich eine Funktion an ein Kontrollkästchen-Element binde:

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

Das Kontrollkästchen ändert sein geprüftes Attribut bevor das Ereignis ausgelöst wird. Dies ist das normale Verhalten und führt zu einem umgekehrten Ergebnis.

Wenn ich jedoch:

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

Das Kontrollkästchen ändert das markierte Attribut after das Ereignis wird ausgelöst.

Meine Frage ist, gibt es eine Möglichkeit, das Klickereignis von jQuery auszulösen, wie es ein normaler Klick tun würde (erstes Szenario)?

PS: Ich habe es schon mit trigger('click') ausprobiert.

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

Hinweis: In älteren Versionen von jquery war es in Ordnung, attr zu verwenden. Jetzt wird empfohlen, prop zu verwenden, um den Status zu lesen.

81
tcurdt

Es gibt eine Problemumgehung, die in jQuery 1.3.2 und 1.4.2 funktioniert:

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

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

Ich stimme jedoch zu, dass dieses Verhalten im Vergleich zum nativen Ereignis fehlerhaft erscheint.

26
Nick Craver

Ab Juni 2016 (mit jquery 2.1.4) funktioniert keine der anderen Lösungsvorschläge. Die Überprüfung von attr('checked') gibt immer undefined und is('checked) immer false zurück. 

Verwenden Sie einfach die Prop-Methode:

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

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

Mit jQuery 1.7.2 tritt dieses Verhalten immer noch auf. Eine einfache Problemumgehung besteht darin, die Ausführung des Click-Handlers mit setTimeout aufzuschieben und den Browser in der Zwischenzeit seine Magie wirken lassen:

$("#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

Wenn Sie mit diesem eher unerwünschten Verhalten rechnen, würden Sie einen weiteren Parameter von jQuery.trigger () an den Click-Handler des Kontrollkästchens übergeben. Mit diesem zusätzlichen Parameter wird der Click-Handler darüber informiert, dass der Klick programmgesteuert ausgelöst wurde, anstatt dass der Benutzer direkt auf das Kontrollkästchen klickt. Der Click-Handler des Kontrollkästchens kann dann den gemeldeten Prüfstatus umkehren.

So würde ich das Klickereignis über eine Checkbox mit der ID "myCheckBox" auslösen. Beachten Sie, dass ich auch einen Objektparameter mit einem einzelnen Member, nonUI, übergebe, der auf true gesetzt ist:

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

Und wie ich damit im Click-Event-Handler des Kontrollkästchens umgehe. Die Handlerfunktion prüft, ob das Nicht-UI-Objekt als zweiter Parameter vorhanden ist. (Der erste Parameter ist immer das Ereignis selbst.) Wenn der Parameter vorhanden und auf true gesetzt ist, invertiere ich den gemeldeten .checked-Status. Wenn kein solcher Parameter übergeben wird - was nicht vorhanden ist, wenn der Benutzer einfach das Kontrollkästchen in der Benutzeroberfläche angeklickt hat -, berichte ich den aktuellen Status .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);
    });

JSFiddle-Version unter http://jsfiddle.net/BrownieBoy/h5mDZ/

Ich habe mit Chrome, Firefox und IE 8 getestet.

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

JSFIDDLE

0
Surya R Praveen

Nun, für das erste Szenario ist dies etwas, was ich mir ausgedacht habe.

http://jsbin.com/uwupa/edit

Anstatt das "click" -Ereignis zu binden, binden Sie im Wesentlichen das "change" -Ereignis mit der Warnung.

Wenn Sie dann das Ereignis auslösen, lösen Sie zuerst den Klick und dann die Änderung aus.

0
RussellUresti

Zusätzlich zu Nick Cravers Antwort müssen Sie, um dies ordnungsgemäß mit IE 8 zu funktionieren, einen zusätzlichen Klick-Handler zum Kontrollkästchen hinzufügen:

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

Andernfalls wird der Rückruf nur ausgelöst, wenn das Kontrollkästchen den Fokus verliert, da IE 8 sich auf Kontrollkästchen und Funkgeräte konzentriert, wenn sie angeklickt werden.

Wurde noch nicht mit IE 9 getestet.

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

});
0
user3607804