Waarde van HTML checkbox uit onclick/onchange gebeurtenissen halen

**Het korte antwoord...

Gebruik het click event, dat pas vuurt nadat de waarde is bijgewerkt, en vuurt wanneer je dat wilt:

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

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

Live voorbeeld | Bron

Het langere antwoord:

De change event handler wordt pas aangeroepen als de checked status is bijgewerkt (live voorbeeld | bron), maar omdat (zoals Tim Büthe opmerkt in de commentaren) IE de change event pas afvuurt als het selectievakje zijn focus verliest, krijg je de melding niet pro-actief. Erger nog, als je met IE op een label voor de checkbox klikt (in plaats van op de checkbox zelf) om hem te updaten, kun je de indruk krijgen dat je'de oude waarde krijgt (probeer het hier met IE door op het label te klikken: live voorbeeld | bron). Dit komt omdat als de checkbox focus heeft, het klikken op het label de focus ervan weghaalt, het change event afvuurt met de oude waarde, en dan het click gebeuren de nieuwe waarde instelt en de focus terugzet op de checkbox. Erg verwarrend.

Maar je kunt al deze onaangenaamheden vermijden door click te gebruiken.

Ik'heb DOM0 handlers (onxyz attributen) gebruikt omdat dat is waar je naar vroeg, maar voor de goede orde, ik zou over het algemeen aanraden om handlers in code aan te haken (DOM2's addEventListener, of attachEvent in oudere versies van IE) in plaats van onxyz attributen te gebruiken. Dat laat je toe meerdere handlers aan hetzelfde element te koppelen en laat je vermijden dat je al je handlers globale functies maakt.

Een eerdere versie van dit antwoord gebruikte deze code voor handleClick:

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

Het doel leek te zijn om de klik te laten voltooien alvorens naar de waarde te kijken. Voor zover ik'ben op de hoogte, is er geen reden om dat te doen, en ik heb geen idee waarom ik dat deed. De waarde wordt veranderd voordat de click handler wordt aangeroepen. In feite is de spec daar vrij duidelijk over. De versie zonder setTimeout werkt perfect in elke browser die ik'heb geprobeerd (zelfs IE6). Ik kan alleen maar aannemen dat ik dacht aan een ander platform waar de verandering pas na de gebeurtenis wordt gedaan. In ieder geval, geen reden om dat te doen met HTML checkboxes.

Gebruik dit.

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

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

    //use this value

}
</script>

Voor React.js, kunt u dit doen met meer leesbare code. Hopelijk heb je er wat aan.

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