<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
Ako môžem v rámci onClickHandler
a/alebo onChangeHandler
zistiť, aký je nový stav zaškrtávacieho políčka?
Krátka odpoveď:
Použite udalosť click
, ktorá sa spustí až po aktualizácii hodnoty a spustí sa, keď chcete:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
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.
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)} />
}