<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
Desde adentro onClickHandler
y / o onChangeHandler
, ¿cómo puedo determinar cuál es el nuevo estado de la casilla de verificación?
<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
Desde adentro onClickHandler
y / o onChangeHandler
, ¿cómo puedo determinar cuál es el nuevo estado de la casilla de verificación?
Respuestas:
La respuesta corta:
Use el click
evento, 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);
}
La respuesta más larga:
El change
controlador de eventos no se llama hasta que el checked
estado se haya actualizado ( ejemplo en vivo | fuente ), pero porque (como Tim Büthe señala en los comentarios) IE no dispara el change
evento 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 change
evento con el valor anterior y luegoclick
sucede 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 click
en su lugar.
He usado controladores DOM0 ( onxyz
atributos) porque eso es lo que preguntaste, pero para el registro, generalmente recomendaría conectar controladores en código (DOM2 addEventListener
o attachEvent
en versiones anteriores de IE) en lugar de usar onxyz
atributos. 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 click
se llame al controlador. De hecho, la especificación es bastante clara al respecto . La versión sin setTimeout
funciona 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.
tab
+ space
) también activará el onclick
controlador (verificado en Chrome 51, al menos).
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)} />
}
onchange
funciona correctamente en+IE9
. Fuente