<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
Da onClickHandler
e/o onChangeHandler
, come posso determinare qual è il nuovo stato della casella di controllo?
La risposta breve:
Usa l'evento click
, che non si innesca fino a quando il valore non è stato aggiornato, e si innesca quando vuoi tu:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
La risposta più lunga:
Il gestore dell'evento change
non viene chiamato fino a quando lo stato checked
è stato aggiornato (esempio dal vivo | fonte), ma poiché (come Tim Büsottolinea nei commenti) IE non lancia l'evento change
fino a quando la checkbox non perde il focus, non si ottiene la notifica in modo proattivo. Peggio ancora, con IE se clicchi su una etichetta della checkbox (piuttosto che sulla checkbox stessa) per aggiornarla, puoi avere l'impressione di ottenere il vecchio valore (prova con IE qui cliccando sull'etichetta: esempio live | fonte). Questo perché se la checkbox ha il focus, cliccando sull'etichetta si toglie il focus da essa, facendo scattare l'evento change
con il vecchio valore, e poi il click
avviene impostando il nuovo valore e rimettendo il focus sulla checkbox. Molto confuso.
Ma puoi evitare tutte queste sgradevolezze se invece usi click
.
Ho usato i gestori DOM0 (attributi onxyz
) perché questo è ciò che hai chiesto, ma per la cronaca, raccomando generalmente di collegare i gestori nel codice (DOM2's addEventListener
, o attachEvent
nelle vecchie versioni di IE) piuttosto che usare gli attributi onxyz
. Questo ti permette di collegare più gestori allo stesso elemento e ti permette di evitare di rendere tutti i tuoi gestori funzioni globali.
Una versione precedente di questa risposta usava questo codice per handleClick
:
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
L'obiettivo sembrava essere quello di consentire il completamento del clic prima di guardare il valore. Per quanto ne so, non c'è motivo di farlo, e non ho idea del perché l'ho fatto. Il valore viene cambiato prima che il gestore del click
venga chiamato. Infatti, la specifica è abbastanza chiara su questo. La versione senza setTimeout
funziona perfettamente in ogni browser che ho provato (anche IE6). Posso solo supporre che stavo pensando a qualche altra piattaforma dove il cambiamento non viene fatto fino a dopo l'evento. In ogni caso, non c'è motivo di farlo con le caselle di controllo HTML.
Per React.js, puoi farlo con un codice più leggibile. Spero sia d'aiuto.
handleCheckboxChange(e) {
console.log('value of checkbox : ', e.target.checked);
}
render() {
return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}