Obtener el valor de la casilla de verificación HTML de los eventos onclick / onchange

Question

Obtener el valor de la casilla de verificación HTML de los eventos onclick / onchange

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

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

157

checkbox javascript html dom events

Author: Mark Amery, 2010-12-17

Source

2 answers

Usa esto

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

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

    //use this value

}
</script>

2

Author: Farhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-07 16:06:26

score 300 · Accepted Answer

La respuesta corta:

Use el evento click, que no se activará hasta después de que el valor se haya actualizado, 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 controlador de eventos change no se llama hasta que el estado checked se ha actualizado (ejemplo en vivo | source), sino porque (como señala Tim Büthe en los comentarios) IE no dispara el evento change hasta que la casilla de verificación pierda el foco, no recibirá 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 propia casilla de verificación) para actualizarla, puede tener la impresión de que está obteniendo el valor antiguo (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 le quita el foco, activando el evento change con el valor anterior, y luego el click se configura el nuevo valor y se vuelve a configurar el foco en la casilla de verificación. Muy confuso.

Pero puede evitar todo ese malestar si usa click en su lugar.

He usado manejadores DOM0 (atributosonxyz) porque eso es lo que preguntaste, pero para el registro, generalmente recomendaría conectar manejadores en código (addEventListener de DOM2, o attachEvent en versiones anteriores de IE) en lugar de usar atributos onxyz. Que le permite adjuntar varios controladores al mismo elemento y le permite evite hacer que todos sus controladores sean funciones globales.

Una versión anterior de esta respuesta usó 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 mirar el valor. Por lo que sé, no hay 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 bastante clara sobre eso . La versión sin setTimeout funciona perfectamente en todos los navegadores He intentado (incluso IE6). Solo puedo asumir 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 las casillas de verificación HTML.