desencadenar un evento en input.checked = true false _without_/jQuery

Question

Consideremos el siguiente código (http://jsfiddle.net/FW36F/1/):

<input type="checkbox" onchange="alert(this.checked)"> 
<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].checked;">toggle</button> 

Si hace clic en la casilla de verificación, aparece una alerta que le dice si está marcada o no. Estupendo. Sin embargo, si hace clic en el botón para alternar, la casilla de verificación cambia el estado de verificación pero el evento onchange NO se activa.

Esencialmente, el cambio de una casilla de verificación solo se activa si el usuario realmente hace clic en la casilla de verificación, no si la casilla de verificación se cambia mediante JavaScript. Esto es cierto en IE, FF y Chrome. Parece que este comportamiento también es específico.

Sin embargo, realmente necesito algún tipo de evento para disparar si, por alguna razón, el estado de verificación de la casilla de verificación cambia. es posible?

Ah sí, y jQuery no está permitido. Y por favor no soluciones basadas en setTimeout/setInterval tampoco ...

Actualización: Además, debo dejar en claro que el código anterior es sólo para ilustración. En el código real, necesitamos asegurarnos de que el estado de la casilla de verificación esté marcada o desmarcada, no solo alternarla. Tal vez esto sería mejor código para ilustrar que:

<input type="checkbox" onchange="alert(this.checked)"> 
<button onclick="document.getElementsByTagName('input')[0].checked=true;">check</button> 
<button onclick="document.getElementsByTagName('input')[0].checked=false;">un check</button> 

Por otra parte, puede haber código en otras áreas no lo hacemos totalmente el control, lo que podría hacer una simple .checked = verdadero/falso - nos gustaría para asegurarnos de que vemos eso también.

Answer 1

Las respuestas existentes funcionan bien, incluso con su actualización . Solo sé inteligente y no llames si no lo necesitas. Además, no use JS en línea. Eso estuvo bien hace 10 años.

<input type="checkbox" onchange="alert(this.checked)"> 
<button id='check'>check</button> 
<button id='uncheck'>uncheck</button> 

document.getElementById('check').onclick = function() { 
    if (!this.checked) { 
     this.click(); 
    } 
} 

Si necesita ser modificada cuando una secuencia de comandos cambia el valor, en Firefox, puede utilizar https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

Ejemplo aquí http://jsfiddle.net/PPuZ8/

// In FF $ is a shortcut for document.getElementById 
// It doesn't fire when set from the UI, you have to use a regular handler for that 
$('cb').watch("checked", function(){ 
    console.log('Checked state changed from script', arguments); 
    return true; 
}); 

Para decir, se puede utilizar onpropertychangehttp://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx (Gracias a vibraciones para el recordatorio)

Ejemplo: http://jsfiddle.net/PPuZ8/1/

document.getElementById('cb').onpropertychange = function() {  
    if (event.propertyName == 'checked') { 
     console.log('Checked state changed onproperty change');  
    } 
}; 

Para otros navegadores, usted tiene que sondear utilizando setInterval/setTimeout

Answer 2

Uso click()

<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].click();">toggle</button> 

Answer 3

Hacer que el botón de activación realidad clic la casilla:

<input type="checkbox" onchange="alert(this.checked)"> 
<button onclick="document.getElementsByTagName('input')[0].click()"> 
    toggle 
</button> 

Si desea ningún cambio en la casilla de verificación para informarle de su nueva posición, entonces yo cree un método global para cambiar el valor de la casilla de verificación y trátelo como un proxy:

<script> 
function toggleCB(state) { 
    var cb = document.getElementById("cb"); 
    arguments.length ? cb.checked = state : cb.click() ; 
    return cb.checked; 
} 
</script> 
<input id="cb" type="checkbox" /> 
<input type="button" onClick="alert(toggleCB(true))" value="Check" /> 
<input type="button" onClick="alert(toggleCB(false))" value="Uncheck" /> 
<input type="button" onClick="alert(toggleCB())" value="Toggle" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Ahora, cuando establezca o active la casilla de verificación, obtendrá el estado verificado.

Una última cosa, evitaría usar el atributo onClick, y en su lugar vincular los eventos de clic desde su JavaScript.

Answer 4

oninput es el evento que necesita para manejar ... https://developer.mozilla.org/en/DOM/DOM_event_reference/input