javascript - solo - Obtener valor de HTML Checkbox de eventos onclick/onchange

obtener valor de varios checkbox javascript

Question

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

Desde dentro onClickHandler y / o onChangeHandler , ¿cómo puedo determinar si el nuevo estado de la casilla de verificación?

Answer 1

Utilizar esta

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

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

    //use this value

}
</script>

Answer 2

La respuesta corta:

Utilice el evento click , que no se disparará hasta que se haya actualizado el valor, y se dispara cuando lo desee:

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

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

Ejemplo en vivo | Source

La respuesta más larga:

El controlador de evento de change no se llama hasta que se haya actualizado el estado checked ( ejemplo en vivo | source ), sino porque (como señala Tim Büthe en los comentarios) IE no activa el evento de change hasta que la casilla pierde enfoque, usted no recibe la notificación proactivamente. 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 (pruébelo con IE aquí haciendo clic en la etiqueta: ejemplo en vivo | source ). Esto se debe a que si la casilla de verificación tiene foco, al hacer clic en la etiqueta se aleja del foco, se dispara el evento de change con el valor anterior y luego se hace click establecer el nuevo valor y volver a establecer el foco en la casilla de verificación. Muy confuso.

Pero puede evitar todo lo desagradable si usa click lugar.

He usado manejadores DOM0 (atributos onxyz ) porque eso es lo que preguntaste, pero para el registro, generalmente recomendaría conectar controladores en el código ( addEventListener de DOM2 o attachEvent en versiones anteriores de IE) en lugar de usar atributos onxyz . Eso le permite asociar múltiples manejadores al mismo elemento y le permite evitar hacer todas las funciones globales de sus manejadores.

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

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

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