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

Wenn ich eine Funktion an ein Kontrollkästchen binde, wie:

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

Das Kontrollkästchen ändert sein markiertes 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 Attribut "Aktiviert", nachdem das Ereignis ausgelöst wurde.

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

PS: Ich habe es schon versucht mit trigger('click');

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

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

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

Aber ich stimme zu, dieses Verhalten scheint im Vergleich zum nativen Ereignis fehlerhaft zu sein.

Ab Juni 2016 (unter Verwendung von jquery 2.1.4) funktioniert keine der anderen vorgeschlagenen Lösungen. Das Überprüfen attr('checked')kehrt immer zurück undefinedund is('checked)kehrt immer zurückfalse .

Verwenden Sie einfach die Requisitenmethode:

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

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

Ich habe dieses Verhalten immer noch mit jQuery 1.7.2. Eine einfache Problemumgehung besteht darin, die Ausführung des Klick-Handlers mit setTimeout zu verschieben und den Browser in der Zwischenzeit seine Magie entfalten zu lassen:

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

Wenn Sie dieses eher unerwünschte Verhalten antizipieren, besteht eine Möglichkeit darin, einen zusätzlichen Parameter aus jQuery.trigger () an den Klick-Handler des Kontrollkästchens zu übergeben. Dieser zusätzliche Parameter soll den Klick-Handler darüber informieren, dass der Klick programmgesteuert ausgelöst wurde, anstatt dass der Benutzer direkt auf das Kontrollkästchen selbst klickt. Der Klick-Handler des Kontrollkästchens kann dann den gemeldeten Prüfstatus invertieren.

So würde ich das Klickereignis für ein Kontrollkästchen mit der ID "myCheckBox" auslösen. Beachten Sie, dass ich auch einen Objektparameter mit einem einzelnen Element, nonUI, übergebe, das auf true gesetzt ist:

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

Und so gehe ich damit im Click-Event-Handler des Kontrollkästchens um. Die Handlerfunktion prüft, ob das nonUI-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 Status .checked. Wenn kein solcher Parameter übergeben wird - was nicht der Fall ist, wenn der Benutzer einfach auf das Kontrollkästchen in der Benutzeroberfläche geklickt hat -, melde ich den tatsächlichen 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.

<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

Nun, um zum ersten Szenario zu passen, habe ich mir das ausgedacht.

http://jsbin.com/uwupa/edit

Anstatt das "Klick" -Ereignis zu binden, binden Sie im Wesentlichen das "Änderungs" -Ereignis mit der Warnung.

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

Zusätzlich zur Antwort von Nick Craver IE 8müssen Sie dem Kontrollkästchen einen zusätzlichen Klick-Handler hinzufügen , damit dies ordnungsgemäß funktioniert :

// 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 8Kontrollkästchen und Funkgeräte beim Klicken weiterhin im Fokus bleiben.

_{Habe aber nicht getestet IE 9.}

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

});

Schnellster und einfachster Weg :

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

$el[0].checked;

$ el - ist ein Abfrageelement der Auswahl.

Genießen!

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

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