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

209
<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?

Maxim Gershkovich
fuente

Respuestas:

385

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.

TJ Crowder
fuente
66
Afortunadamente onchangefunciona correctamente en +IE9. Fuente
Mori
Agregando mis 2 centavos aquí: Parece que IE8 (y más abajo, supongo), diferencia entre un clic hacia abajo y un lanzamiento de clic ... y que la razón por la que estamos en esta página es porque se dispara al hacer clic hacia abajo en lugar de hacer clic lanzamiento. Parece que las casillas de verificación solo se activan al soltar un clic: al hacer clic hacia abajo y luego mover el mouse se registraría un clic, pero no se modificaría una casilla de verificación.
dah97765
2
Parece que alternar la casilla de verificación a través del teclado de navegación ( tab+ space) también activará el onclickcontrolador (verificado en Chrome 51, al menos).
Nate Whittaker
¿Cómo obtener el valor de esa casilla de verificación al hacer clic?
user7350714
12

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)} />
}
Pakpoom Tiwakornkit
fuente
8

Utilizar este

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

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

    //use this value

}
</script>
Farhan
fuente