Získanie hodnoty políčka HTML Checkbox z udalostí onclick/onchange

Krátka odpoveď:

Použite udalosť click, ktorá sa spustí až po aktualizácii hodnoty a spustí sa, keď chcete:

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

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

Živý príklad | Zdroj

Dlhšia odpoveď:

Obsluha udalosti zmeniť sa nevolá, kým sa neaktualizuje stav začiarknuté (živý príklad | zdroj), ale pretože (ako upozorňuje Tim Büthe v komentároch) IE nevyvolá udalosť zmeniť, kým začiarkavacie políčko nestratí fokus, nedostanete proaktívne oznámenie. Horšie je, že ak v IE kliknete na štítok zaškrtávacieho políčka (a nie na samotné políčko), aby ste ho aktualizovali, môžete nadobudnúť dojem, že dostanete starú hodnotu (vyskúšajte si to v IE tu kliknutím na štítok: živý príklad | zdroj). Je to preto, že ak má zaškrtávacie políčko fokus, kliknutím na štítok sa od neho odoberie fokus, čím sa spustí udalosť zmeniť so starou hodnotou, a potom dôjde k kliku, ktorým sa nastaví nová hodnota a fokus sa vráti na zaškrtávacie políčko. Veľmi mätúce.

Všetkým týmto nepríjemnostiam sa však môžete vyhnúť, ak namiesto toho použijete click.

Použil som obslužné prvky DOM0 (atribúty onxyz), pretože ste sa na to pýtali, ale pre poriadok by som vo všeobecnosti odporúčal pripojiť obslužné prvky v kóde (DOM2's addEventListener alebo attachEvent v starších verziách IE) namiesto použitia atribútov onxyz. To vám umožní pripojiť viacero obslužných prvkov k tomu istému prvku a vyhnúť sa tomu, aby všetky vaše obslužné prvky boli globálnymi funkciami.

V predchádzajúcej verzii tejto odpovede bol pre handleClick použitý tento kód:

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

Zdá sa, že cieľom bolo umožniť dokončenie kliknutia pred zobrazením hodnoty. Pokiaľ je mi známe, nie je na to žiadny dôvod a netuším, prečo som to urobil. Hodnota sa zmení pred zavolaním obslužnej funkcie click. V skutočnosti je to v špecifikácii celkom jasne. Verzia bez setTimeout funguje bez problémov v každom prehliadači, ktorý som vyskúšal (dokonca aj v IE6). Môžem len predpokladať, že som myslel na nejakú inú platformu, kde sa zmena'vykoná až po udalosti. V každom prípade nie je dôvod robiť to so zaškrtávacími políčkami HTML.

Použite tento

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

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

    //use this value

}
</script>

V prípade React.js to môžete urobiť pomocou čitateľnejšieho kódu. Dúfam, že to pomôže.

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