jQuery Checkbox Ereignisbehandlung

Ich habe folgendes:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

Wie verwende ich jQuery, um einmyform eingetretenes Check-Ereignis zu erfassen und festzustellen, welches Kontrollkästchen aktiviert oder deaktiviert wurde (und ob es aktiviert oder deaktiviert wurde)?

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

Verwenden Sie das Änderungsereignis.

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

Es gibt mehrere nützliche Antworten, aber keine scheint die neuesten Optionen abzudecken . Zu diesem Zweck berücksichtigen alle meine Beispiele auch das Vorhandensein übereinstimmender labelElemente und ermöglichen es Ihnen, dynamisch Kontrollkästchen hinzuzufügen und die Ergebnisse in einem Seitenbereich anzuzeigen (durch Umleiten console.log).

• Das Abhören von clickEreignissen checkboxesist keine gute Idee, da dadurch weder die Tastatur umgeschaltet noch Änderungen vorgenommen werden können, bei denen auf ein übereinstimmendes labelElement geklickt wurde. Hören Sie immer auf das changeEreignis.

• Verwenden Sie den :checkboxPseudo-Selektor jQuery anstelle von input[type=checkbox]. :checkboxist kürzer und besser lesbar.

• Verwenden Sie diese is()Option mit dem :checkedPseudo-Selektor jQuery , um zu testen, ob ein Kontrollkästchen aktiviert ist. Dies funktioniert garantiert in allen Browsern.

Grundlegende Ereignisbehandlungsroutine, die an vorhandene Elemente angehängt ist:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

Anmerkungen:

• Verwendet den :checkboxSelektor, der der Verwendung vorzuziehen istinput[type=checkbox]
• Dies stellt nur eine Verbindung zu übereinstimmenden Elementen her, die zum Zeitpunkt der Registrierung des Ereignisses vorhanden waren.

Delegierter Ereignishandler, der an das Vorgängerelement angehängt ist:

Delegierte Ereignishandler sind für Situationen konzipiert, in denen die Elemente möglicherweise noch nicht vorhanden sind (dynamisch geladen oder erstellt), und sind sehr nützlich. Sie delegieren die Verantwortung an ein Ahnenelement (daher der Begriff).

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

Anmerkungen:

• Dies funktioniert, indem auf Ereignisse gewartet wird (in diesem Fall change), um zu einem sich nicht ändernden Vorfahrenelement (in diesem Fall #myform) aufzublasen .
• Es dann wendet die jQuery Selektor ( ':checkbox'in diesem Fall) , um nur die Elemente in der Blasenkette .
• Es dann gilt die Event - Handler - Funktion auf nur die passenden Elemente, die das Ereignis ausgelöst hat .
• Verwenden Sie diese Option documentals Standard, um den delegierten Ereignishandler zu verbinden, wenn nichts anderes näher / bequemer ist.
• Nicht bodyzum Anhängen delegierter Ereignisse verwenden, da es einen Fehler (im Zusammenhang mit dem Styling) gibt, der verhindern kann, dass Mausereignisse abgerufen werden.

Das Ergebnis delegierter Handler ist, dass die übereinstimmenden Elemente nur zur Ereigniszeit vorhanden sein müssen und nicht, wenn der Ereignishandler registriert wurde. Dies ermöglicht dynamisch hinzugefügten Inhalt, um die Ereignisse zu generieren.

F: Ist es langsamer?

A: Solange sich die Ereignisse mit Benutzerinteraktionsgeschwindigkeiten befinden, müssen Sie sich keine Gedanken über den vernachlässigbaren Geschwindigkeitsunterschied zwischen einem delegierten Ereignishandler und einem direkt verbundenen Handler machen. Die Vorteile der Delegation überwiegen bei weitem alle geringfügigen Nachteile. Delegierte Ereignishandler lassen sich tatsächlich schneller registrieren, da sie normalerweise eine Verbindung zu einem einzelnen übereinstimmenden Element herstellen.

Warum wird prop('checked', true)das changeEreignis nicht ausgelöst?

Dies ist eigentlich beabsichtigt. Wenn es das Ereignis auslösen würde, würden Sie leicht in eine Situation endloser Updates geraten. Senden Sie stattdessen nach dem Ändern der aktivierten Eigenschaft ein Änderungsereignis mit trigger(nicht triggerHandler) an dasselbe Element :

zB ohne dass ein triggerEreignis eintritt

$cb.prop('checked', !$cb.prop('checked'));

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

zB mit triggerdem normalen Änderungsereignis wird abgefangen

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

Anmerkungen:

• Verwenden Sie es nicht triggerHandlerwie von einem Benutzer vorgeschlagen, da es keine Ereignisse an einen delegierten Ereignishandler weiterleitet.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

obwohl es wird für einen Event - Handler arbeiten direkt mit dem Element:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

Mit .triggerHandler () ausgelöste Ereignisse sprudeln nicht in die DOM-Hierarchie. Wenn sie nicht direkt vom Zielelement verarbeitet werden, tun sie nichts.

Referenz: http://api.jquery.com/triggerhandler/

Wenn jemand zusätzliche Funktionen hat, von denen er glaubt, dass sie nicht davon betroffen sind, schlagen Sie bitte Ergänzungen vor .

Verwenden der neuen Ein-Methode in jQuery (1.7): http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

• Der Event-Handler wird weiterleben
• erfasst, ob das Kontrollkästchen über die Tastatur geändert wurde, und klickt nicht nur

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

In Anerkennung der Tatsache , dass der Fragesteller jQuery ausdrücklich darum gebeten , und dass die gewählte Antwort richtig ist, sei darauf hingewiesen, dass dieses Problem nicht wirklich brauchen jQuery pro sagen. Wenn man dieses Problem ohne es lösen möchte, kann man einfach das einstellenonClick Attribut der Kontrollkästchen , denen Sie zusätzliche Funktionen hinzufügen möchten, z. B.:

HTML:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

Javascript:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

Geige: http://jsfiddle.net/Y9f66/1/

Ich habe versucht, den Code von der ersten Antwort, es funktioniert nicht, aber ich habe herumgespielt und diese Arbeit für mich

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});