Ich möchte, dass ein Ereignis clientseitig ausgelöst wird, wenn ein Kontrollkästchen aktiviert / deaktiviert ist:
$('.checkbox').click(function() {
if ($(this).is(':checked')) {
// Do stuff
}
});
Grundsätzlich möchte ich, dass dies für jedes Kontrollkästchen auf der Seite geschieht. Ist diese Methode zum Auslösen des Klicks und Überprüfen des Status in Ordnung?
Ich denke, es muss einen saubereren jQuery-Weg geben. Kennt jemand eine Lösung?
javascript
jquery
event-handling
AnonyMouse
quelle
quelle
Antworten:
Binden Sie an das
change
Ereignis stattclick
. Sie müssen jedoch wahrscheinlich noch prüfen, ob das Kontrollkästchen aktiviert ist oder nicht:Der Hauptvorteil der Bindung an dasIn Kommentaren redigiertchange
Ereignis gegenüber demclick
Ereignis besteht darin, dass nicht alle Klicks auf ein Kontrollkästchen dazu führen, dass es den Status ändert. Wenn Sie nur Ereignisse erfassen möchten, bei denen das Kontrollkästchen den Status ändert, möchten Sie daschange
Ereignis mit dem passenden Namen .Beachten Sie auch, dass ich
this.checked
das Element verwendet habe, anstatt es in ein jQuery-Objekt zu verpacken und jQuery-Methoden zu verwenden, einfach weil es kürzer und schneller ist, direkt auf die Eigenschaft des DOM-Elements zuzugreifen.Bearbeiten (siehe Kommentare)
Um alle Kontrollkästchen zu erhalten, haben Sie mehrere Möglichkeiten. Sie können den
:checkbox
Pseudo-Selektor verwenden:Oder Sie könnten ein Attribut verwenden, das gleich Selektor ist:
quelle
$(this).is(':checked')
. Ich dachte, Siechange
müssten das Ereignis verwenden, wenn Sie Änderungen über die Tastatur erkennen möchten (Tabulieren, Drücken der Leertaste), aber überraschenderweiseclick
auch Änderungen, die nicht durch einen Mausklick verursacht wurden, nicht sicher, ob es sich um eine jQuery-Sache handelt, jsfiddle.net / mendesjuan / E39szclick
,change
oder was auch immer für alle Kontrollkästchen auf der Seite kann zu Leistungsproblemen führt (depepending auf der Menge des Kontrollkästchen). Versuchen Sie, eine Bindung an das übergeordnete Element oder das Dokument$('form').on('change', ':checkbox', function(){ //stuff });
Wenn Sie die Kontrollkästchen dynamisch hinzufügen, funktioniert die oben akzeptierte Antwort nicht. Sie müssen die Ereignisdelegierung nutzen, die es einem übergeordneten Knoten ermöglicht, Ereignisse mit Blasen von einem bestimmten Nachkommen zu erfassen und einen Rückruf auszugeben.
Beachten Sie, dass die Verwendung
document
für den übergeordneten Selektor fast immer nicht erforderlich ist. Wählen Sie stattdessen einen spezifischeren übergeordneten Knoten, um zu verhindern, dass das Ereignis auf zu viele Ebenen übertragen wird.Das folgende Beispiel zeigt, wie die Ereignisse dynamisch hinzugefügter Dom-Knoten zuvor definierte Listener nicht auslösen.
In diesem Beispiel wird die Verwendung der Ereignisdelegierung zum Erfassen von Ereignissen für einen bestimmten Knoten (
h1
in diesem Fall) und zum Ausgeben eines Rückrufs für solche Ereignisse angezeigt.quelle
Nur eine andere Lösung
quelle
Wenn Sie beabsichtigen, ein Ereignis nur an aktivierte Kontrollkästchen anzuhängen (damit es ausgelöst wird, wenn sie deaktiviert und später erneut aktiviert werden), ist dies das, was Sie möchten.
wenn Sie beabsichtigen, ein Ereignis an alle Kontrollkästchen anzuhängen (aktiviert und deaktiviert)
Wenn Sie möchten, dass es nur ausgelöst wird, wenn sie aktiviert sind (nicht aktiviert), antworten Sie oben auf @James Allardice.
Übrigens
input[type='checkbox']:checked
ist CSS-Selektor.quelle
$("input[type='checkbox']:not(:checked)")
quelle
quelle
Vielleicht ist dies eine Alternative für Sie.
quelle
Dies ist die Lösung, um herauszufinden, ob das Kontrollkästchen aktiviert ist oder nicht. Verwenden Sie die Funktion #prop () //
quelle
Versuchen Sie diese jQuery-Validierung
quelle
Ist sehr einfach, so benutze ich:
JQuery:
Grüße!
quelle