Frage jQuery, Checkboxen und .is (": checked")


Wenn ich eine Funktion an ein Checkbox-Element binde wie:

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

Das Kontrollkästchen ändert sein geprüftes Attribut Vor Das Ereignis wird ausgelöst, dies ist das normale Verhalten und ergibt ein inverses Ergebnis.

Aber wenn ich Folgendes mache:

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

Das Kontrollkästchen ändert das überprüfte Attribut nach 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 versucht trigger('click');


76
2018-04-17 22:33


Ursprung


Antworten:


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

Hinweis: In älteren Versionen von jQuery war es OK zu verwenden attr. Jetzt wird es empfohlen zu verwenden prop den Staat lesen.


70
2018-04-17 22:56



Es gibt einen Workaround, der in jQuery funktioniert 1.3.2 und 1.4.2:

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


24
2018-04-17 23:06



Ab Juni 2016 (mit jquery 2.1.4) funktioniert keiner der anderen vorgeschlagenen Lösungen. Überprüfung attr('checked') kommt immer zurück undefined und is('checked) kommt immer zurück false.

Verwenden Sie einfach die Prop-Methode:

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

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

9
2018-06-13 09:05



Ich habe immer noch dieses Verhalten mit jQuery 1.7.2. Eine einfache Problemumgehung besteht darin, die Ausführung des Click-Handlers mit setTimeout zu verzögern und den Browser in der Zwischenzeit magisch zu machen:

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

3
2017-09-05 10:31



Wenn Sie dieses eher unerwünschte Verhalten antizipieren, sollten Sie einen zusätzlichen Parameter von jQuery.trigger () an den Click-Handler des Kontrollkästchens übergeben. Dieser zusätzliche Parameter dient dazu, den Klick-Handler darüber zu informieren, dass der Klick programmgesteuert ausgelöst wurde, anstatt dass der Benutzer direkt auf das Kontrollkästchen klickt. Der Click-Handler der Checkbox kann dann den Status der gemeldeten Überprüfung invertieren.

So würde ich das Click-Ereignis auf einem Kontrollkästchen mit der ID "myCheckBox" auslösen. Beachten Sie, dass ich auch einen Objektparameter mit einem einzelnen Member nonUI übergebe, der auf true festgelegt ist:

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

Und so handle ich im Click-Event-Handler der Checkbox. Die Handler-Funktion prüft als zweiten Parameter das Vorhandensein des nonUI-Objekts. (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 der Fall sein wird, wenn der Benutzer einfach auf das Kontrollkästchen in der Benutzeroberfläche klickt -, dann melde ich den aktuellen .checked Status:

$("#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 bei http://jsfiddle.net/BrownieBoy/h5mDZ/

Ich habe mit Chrome, Firefox und IE 8 getestet.


2
2018-06-21 05:41



<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
2017-08-21 12:50



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

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

2
2018-02-28 10:52



Nun, um dem ersten Szenario zu entsprechen, habe ich mir das ausgedacht.

http://jsbin.com/uwupa/edit

Anstatt das "click" -Ereignis zu binden, binden Sie im Wesentlichen das Ereignis "change" an die Warnung.

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


0
2018-04-17 23:04