Obtención del valor de HTML Checkbox de eventos onclick / onchange

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

Desde adentro onClickHandlery / o onChangeHandler, ¿cómo puedo determinar cuál es el nuevo estado de la casilla de verificación?

La respuesta corta:

Use el clickevento, que no se activará hasta después de que se haya actualizado el valor, y se activará cuando lo desee:

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

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

Ejemplo en vivo | Fuente

La respuesta más larga:

El changecontrolador de eventos no se llama hasta que el checkedestado se haya actualizado ( ejemplo en vivo | fuente ), pero porque (como Tim Büthe señala en los comentarios) IE no dispara el changeevento hasta que la casilla de verificación pierde el foco, no se obtiene La notificación de forma proactiva. Peor aún, con IE si hace clic en una etiqueta para la casilla de verificación (en lugar de la casilla de verificación) para actualizarla, puede tener la impresión de que está obteniendo el valor anterior (intente con IE aquí haciendo clic en la etiqueta: ejemplo en vivo | fuente ). Esto se debe a que si la casilla de verificación tiene el foco, al hacer clic en la etiqueta se le quita el foco, disparando el changeevento con el valor anterior y luegoclicksucede configurando el nuevo valor y configurando el foco nuevamente en la casilla de verificación. Muy confuso.

Pero puede evitar todo ese desagrado si lo usa clicken su lugar.

He usado controladores DOM0 ( onxyzatributos) porque eso es lo que preguntaste, pero para el registro, generalmente recomendaría conectar controladores en código (DOM2 addEventListenero attachEventen versiones anteriores de IE) en lugar de usar onxyzatributos. Eso le permite adjuntar múltiples manejadores al mismo elemento y evitar que todas sus manejadores funcionen globalmente.

Una versión anterior de esta respuesta usaba este código para handleClick:

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

El objetivo parecía ser permitir que se completara el clic antes de mirar el valor. Que yo sepa, no hay razón para hacerlo, y no tengo idea de por qué lo hice. El valor se cambia antes de que clickse llame al controlador. De hecho, la especificación es bastante clara al respecto . La versión sin setTimeoutfunciona perfectamente bien en todos los navegadores que he probado (incluso IE6). Solo puedo suponer que estaba pensando en alguna otra plataforma donde el cambio no se realiza hasta después del evento. En cualquier caso, no hay razón para hacerlo con las casillas de verificación HTML.

Para React.js, puede hacer esto con un código más legible. Espero eso ayude.

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

Utilizar este

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

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

    //use this value

}
</script>