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

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

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

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.

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)} />
}

Benutze das

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

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

    //use this value

}
</script>