Wie kann ein Kontrollkästchen mit JavaScript, jQuery oder Vanille aktiviert / deaktiviert werden?
javascript
jquery
checkbox
lisovaccaro
quelle
quelle
Antworten:
Javascript:
jQuery (1.6+):
jQuery (1.5-):
quelle
attr
oderprop
?.checked = true/false
löst daschange
Ereignis nicht aus: - \Wichtiges Verhalten, das noch nicht erwähnt wurde:
Durch programmgesteuertes Festlegen des markierten Attributs wird das
change
Ereignis des Kontrollkästchens nicht ausgelöst .Überzeugen Sie sich selbst in dieser Geige:
http://jsfiddle.net/fjaeger/L9z9t04p/4/
(Geige getestet in Chrome 46, Firefox 41 und IE 11)
Die
click()
MethodeEines Tages schreiben Sie möglicherweise Code, der vom ausgelösten Ereignis abhängt. Rufen Sie die
click()
Methode des Kontrollkästchenelements wie folgt auf, um sicherzustellen, dass das Ereignis ausgelöst wird:Dadurch wird jedoch der aktivierte Status des Kontrollkästchens umgeschaltet, anstatt es speziell auf
true
oder zu setzenfalse
. Denken Sie daran, dass daschange
Ereignis nur ausgelöst werden sollte, wenn sich das aktivierte Attribut tatsächlich ändert.Dies gilt auch für die jQuery-Methode: Durch Festlegen des Attributs mit
prop
oderattr
wird daschange
Ereignis nicht ausgelöst.Einstellung
checked
auf einen bestimmten WertSie können das
checked
Attribut testen , bevor Sie dieclick()
Methode aufrufen . Beispiel:Weitere Informationen zur Klickmethode finden Sie hier:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
quelle
elm.dispatchEvent(new Event('change'));
überprüfen:
zu deaktivieren:
quelle
Wir können ein Partikel-Kontrollkästchen wie folgt aktivieren:
und deaktivieren Sie durch,
quelle
Ich möchte darauf hinweisen, dass das Setzen des Attributs 'checked' auf eine nicht leere Zeichenfolge zu einem Kontrollkästchen führt.
Wenn Sie also das Attribut " Überprüft" auf "Falsch" setzen , wird das Kontrollkästchen aktiviert. Ich musste den Wert auf die leere Zeichenfolge null oder den booleschen Wert false setzen, um sicherzustellen, dass das Kontrollkästchen nicht aktiviert war.
quelle
Versuche dies:
quelle
quelle
quelle
Wenn Sie aus irgendeinem Grund kein
.click()
Checkbox-Element ausführen möchten (oder können) , können Sie den Wert einfach direkt über die Eigenschaft .checked (ein IDL-Attribut von) ändern<input type="checkbox">
) .Beachten Sie, dass dadurch das normalerweise verwandte Ereignis nicht ausgelöst wird ( Änderung ) nicht ausgelöst wird. Sie müssen es daher manuell auslösen, um eine vollständige Lösung zu erhalten, die mit allen verwandten Ereignishandlern funktioniert.
Hier ist ein Funktionsbeispiel in Roh-Javascript (ES6):
Wenn Sie dies ausführen und sowohl auf das Kontrollkästchen als auch auf die Schaltfläche klicken, sollten Sie sich ein Bild davon machen, wie dies funktioniert.
Beachten Sie, dass ich der Kürze halber document.querySelector verwendet habe. Dies kann jedoch leicht so aufgebaut werden, dass entweder eine bestimmte ID an den Konstruktor übergeben wird, oder es kann auf alle Schaltflächen angewendet werden, die als Arienbezeichnungen für ein Kontrollkästchen dienen (beachten Sie, dass ich Ich habe mich nicht darum gekümmert, eine ID auf der Schaltfläche festzulegen und dem Kontrollkästchen eine Arie mit einem Etikett zu geben (was bei Verwendung dieser Methode erfolgen sollte) oder eine Reihe anderer Möglichkeiten, dies zu erweitern. Die letzten beiden
addEventListener
sind nur, um zu demonstrieren, wie es funktioniert.quelle
Für eine einmalige Prüfung versuchen
für mehrere Versuche
Code-Snippet anzeigen
quelle
Ich stimme den aktuellen Antworten zu, aber in meinem Fall funktioniert es nicht. Ich hoffe, dieser Code hilft jemandem in der Zukunft:
quelle