Ottenere valore della casella di controllo HTML dagli eventi onclick / onchange

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

Dall'interno onClickHandlere / o onChangeHandlercome posso determinare qual è il nuovo stato della casella?

La breve risposta:

Utilizzare l' clickevento, che non verrà attivato fino a quando il valore non sarà stato aggiornato e verrà generato quando lo si desidera:

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

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

Esempio live | fonte

La risposta più lunga:

Il changegestore di eventi non viene chiamato fino a quando lo checkedstato non è stato aggiornato ( esempio live | origine ), ma poiché (come sottolineato da Tim Büthe nei commenti) IE non attiva l' changeevento fino a quando la casella di controllo non viene disattivata , non si ottiene la notifica in modo proattivo. Peggio ancora, con IE se fai clic su un'etichetta per la casella di controllo (anziché per la casella di controllo stessa) per aggiornarla, puoi avere l'impressione di ottenere il vecchio valore (provalo con IE qui facendo clic sull'etichetta: esempio live | fonte ). Questo perché se la casella di controllo ha lo stato attivo, facendo clic sull'etichetta si allontana lo stato attivo, attivando l' changeevento con il vecchio valore e quindi ilclickaccade impostando il nuovo valore e riaccendendo la casella di controllo. Molto confuso.

Ma puoi evitare tutta quella spiacevolezza se usi clickinvece.

Ho usato i gestori ( onxyzattributi) DOM0 perché è quello che mi hai chiesto, ma per la cronaca, in genere consiglierei di collegare i gestori nel codice (DOM2 addEventListenero attachEventnelle versioni precedenti di IE) anziché utilizzare gli onxyzattributi. Ciò consente di collegare più gestori allo stesso elemento e di evitare di rendere tutte le funzioni globali dei gestori.

Una versione precedente di questa risposta utilizzava 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 esaminare il valore. Per quanto ne so, non c'è motivo di farlo e non ho idea del perché. Il valore viene modificato prima che clickvenga chiamato il gestore. In effetti, le specifiche sono abbastanza chiare al riguardo . La versione senza setTimeoutfunziona perfettamente su tutti i browser che ho provato (anche IE6). Posso solo supporre che stavo pensando a un'altra piattaforma in cui il cambiamento non è stato fatto fino a dopo l'evento. In ogni caso, nessun motivo per farlo con le caselle di controllo HTML.

Per React.js, puoi farlo con un codice più leggibile. Spero che sia d'aiuto.

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

Usa questo

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

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

    //use this value

}
</script>