Abrufen des Werts des HTML-Kontrollkästchens aus onclick / onchange-Ereignissen

207
<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

Von innen onClickHandlerund / oder onChangeHandlerwie kann ich den neuen Status des Kontrollkästchens ermitteln?

Maxim Gershkovich
quelle

Antworten:

382

Die kurze Antwort:

Verwenden Sie das clickEreignis, das erst nach der Aktualisierung des Werts ausgelöst wird und wann immer Sie möchten:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

Live Beispiel | Quelle

Die längere Antwort:

Der changeEreignishandler wird erst aufgerufen, wenn der checkedStatus aktualisiert wurde ( Live-Beispiel | Quelle ), aber weil (wie Tim Büthe in den Kommentaren hervorhebt) der IE das changeEreignis erst auslöst, wenn das Kontrollkästchen den Fokus verliert, erhalten Sie es nicht die Benachrichtigung proaktiv. Schlimmer noch, wenn Sie mit IE auf eine Beschriftung für das Kontrollkästchen (und nicht auf das Kontrollkästchen selbst) klicken , um es zu aktualisieren, können Sie den Eindruck gewinnen, dass Sie den alten Wert erhalten (versuchen Sie es mit IE hier, indem Sie auf die Beschriftung klicken: Live-Beispiel | Quelle ). Dies liegt daran, dass wenn das Kontrollkästchen den Fokus hat, durch Klicken auf die Beschriftung der Fokus entfernt wird und das changeEreignis mit dem alten Wert ausgelöst wirdclickpassiert, indem der neue Wert gesetzt und der Fokus wieder auf das Kontrollkästchen gesetzt wird. Sehr verwirrend.

Aber Sie können all diese Unannehmlichkeiten vermeiden, wenn Sie clickstattdessen verwenden.

Ich habe DOM0-Handler verwendet (onxyz Attribute) verwendet, weil Sie danach gefragt haben, aber für den Datensatz würde ich generell empfehlen, Handler in Code (DOM2 addEventListeneroder attachEventin älteren Versionen von IE) einzubinden , anstatt onxyzAttribute zu verwenden. Auf diese Weise können Sie mehrere Handler an dasselbe Element anhängen und vermeiden, dass alle Handler globale Funktionen haben.


In einer früheren Version dieser Antwort wurde dieser Code verwendet für handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

Das Ziel schien zu sein, den Klick zu vervollständigen, bevor der Wert betrachtet wurde. Soweit mir bekannt ist, gibt es keinen Grund dafür, und ich habe keine Ahnung, warum ich das getan habe. Der Wert wird geändert, bevor der clickHandler aufgerufen wird. In der Tat ist die Spezifikation ziemlich klar darüber . Die Version ohne setTimeoutfunktioniert perfekt in jedem Browser, den ich ausprobiert habe (sogar IE6). Ich kann nur vermuten, dass ich über eine andere Plattform nachgedacht habe , auf der die Änderung erst nach dem Ereignis vorgenommen wird. In jedem Fall kein Grund, dies mit HTML-Kontrollkästchen zu tun.

TJ Crowder
quelle
6
Zum Glück onchangefunktioniert das richtig in +IE9. Quelle
Mori
Hinzufügen meiner 2 Cent hier: Es scheint, dass IE8 (und darunter, nehme ich an) zwischen einem Klick nach unten und einer Klickfreigabe unterscheidet ... und dass der Grund, warum wir auf dieser Seite sind, darin besteht, dass es bei Klick statt Klick ausgelöst wird Freisetzung. Es scheint, als würden Kontrollkästchen nur bei einer Klickfreigabe aktiviert. Wenn Sie nach unten klicken und dann die Maus bewegen, wird ein Klick registriert, ein Kontrollkästchen jedoch nicht geändert.
dah97765
2
Wenn Sie das Kontrollkästchen über die Tastaturnavigation ( tab+ space) umschalten, wird auch der onclickHandler ausgelöst (zumindest in Chrome 51 überprüft).
Nate Whittaker
Wie erhalte ich den Wert dieses Kontrollkästchens, wenn ich darauf klicke?
user7350714
12

Für React.js können Sie dies mit besser lesbarem Code tun. Ich hoffe es hilft.

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}
Pakpoom Tiwakornkit
quelle
8

Benutze das

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>
Farhan
quelle