valor Obtención de HTML Casilla de onclick/onchange eventos

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

La respuesta corta:

utilizar el evento click, que no se disparará hasta después de que el valor ha sido actualizado, y los incendios cuando lo desee a:

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

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

Live example | Source

La respuesta larga:

El manejador change evento no se conoce hasta que el estado checked se ha actualizado (live example | source), pero debido a que (como señala Tim Büthe en los comentarios) IE doesn No dispare el evento change hasta que la casilla de verificación pierda el foco, no recibe la notificación proactivamente. Peor aún, con IE si hace clic en la 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: live example | source). Esto se debe a que si la casilla de verificación tiene foco, al hacer clic en la etiqueta se aleja del foco, activando el evento change con el valor anterior, y luego el click sucede configurando el nuevo valor y configurando nuevamente el foco en la casilla de verificación. Muy confuso.

Pero puede evitar todo lo desagradable si en su lugar usa click.

manipuladores Dom0 que he usado (onxyz atributos) porque eso es lo que preguntaste, pero para que conste, yo por lo general recomendamos que conecte los manipuladores de código (addEventListener de DOM2 o attachEvent en las versiones antiguas de IE) en lugar de utilizar onxyz atributos. 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 utiliza este código para handleClick:

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

El objetivo parecía ser la de permitir que el clic para completar antes de mirar 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 llamar al controlador click. De hecho, la especificación es quite clear about that. La versión sin setTimeout funciona perfectamente en todos los navegadores que he probado (incluso en 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 hacer eso con casillas de verificación HTML.

Answer 2

Utilice esta

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

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

    //use this value 

} 
</script>