jQuery ist ein Javascript-Framework, das die Codierung von Javascript für eine Website vereinfachen und viele browserübergreifende Kompatibilitätsprobleme beseitigen kann. Gestern habe ich mir angesehen, wie man mit jQuery Formularelementwerte abruft und festlegt, mich aber nicht mit Kontrollkästchen befasst. Der heutige Beitrag befasst sich damit, wie Sie feststellen können, ob ein HTML-Formular-Kontrollkästchen mit jQuery aktiviert oder nicht aktiviert ist, und wie Sie es dann so ändern, dass es deaktiviert / aktiviert wird.
Beispielformular
Unser Beispielformular sieht folgendermaßen aus:
<input type="checkbox" name="foo" value="bar" /><input type="button" onclick="show_checked()" value="Show" /><input type="button" onclick="set_checked(true)" value="On" /><input type="button" onclick="set_checked(false)" value="Off" />
Es gibt ein Kontrollkästchen mit dem Namen „foo“ und dann drei Schaltflächen. Die erste ruft eine Funktion auf, um uns anzuzeigen, ob das Kontrollkästchen aktiviert ist oder nicht, und die zweiten beiden ändern es von aktiviert in nicht aktiviert.
Überprüfen Sie, ob das Kontrollkästchen aktiviert ist
Es gibt verschiedene Möglichkeiten, mit jQuery herauszufinden, ob ein Kontrollkästchen aktiviert ist oder nicht, und hier einige Alternativen. Jeder gibt true zurück, wenn er aktiviert ist, oder false, wenn dies nicht der Fall ist.
$('input').is(':checked')$('input').attr('checked')
Setzen Sie das Kontrollkästchen auf aktiviert oder nicht aktiviert
Der Status des Kontrollkästchens kann mit der Funktion attr() wie folgt geändert werden, um das Kontrollkästchen zu aktivieren:
$('input').attr('checked', true);
und wie so, um das Kontrollkästchen zu deaktivieren:
$('input').attr('checked', false);
Arbeitsbeispiel
Und schließlich ist hier das Beispielformular in Aktion:
Ein Hinweis zu booleschen Werten
In den Kommentaren unten wird über Probleme mit Chromium diskutiert, die damit zusammenhängen können, dass Zeichenfolgenwerte von true und false übergeben werden, während es sich ausschließlich um einen booleschen Wert true oder false handeln muss, da sonst unerwartete Konsequenzen auftreten können.
Es wurde vorgeschlagen, zu verwenden.removeAttr() stattdessen, aber dies kann andere Konsequenzen haben, wenn ich die Kommentare auf der jQuery-Dokumentationsseite für die Funktion gelesen habe. Ich werde diesen Beitrag zu einem späteren Zeitpunkt weiterverfolgen und weitere Tests durchführen, um sicherzugehen, dass
Ein Kontrollkästchen beim Klicken auf ein Etikett umgeschaltet wird
Beachten Sie, dass Javascript nicht erforderlich ist, um ein Kontrollkästchen beim Klicken auf Text umzuschalten. Dafür sind HTML <label> . Lesen Sie meinen Follow-up-Beitrag mit HTML <label> , um Felder für weitere Informationen umzuschalten und auszuwählen.