fuoco un evento su input.checked = true/false _without_ jQuery

Question

Si consideri il seguente codice (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> 

Se si fa clic sulla casella di controllo, si ottiene un avviso che indica se è selezionata o meno. Grande. Tuttavia, se fai clic sul pulsante di attivazione/disattivazione, la casella di controllo cambia lo stato selezionato, ma l'evento onchange NON viene attivato.

In sostanza, la casella di spunta per una casella di controllo viene attivata solo se l'utente fa effettivamente clic sulla casella di controllo, non se la casella di controllo viene modificata tramite JavaScript. Questo è vero in IE, FF e Chrome. Sembra che questo comportamento sia anche alla specifica.

Tuttavia, ho davvero bisogno di un qualche tipo di evento da attivare se, per qualsiasi motivo, lo stato della casella di controllo cambia. È possibile?

Oh sì, e jQuery non è consentito. E per favore no setTimeout/setInterval soluzioni basate ...

Aggiornamento: Inoltre, dovrei chiarire che il codice sopra è solo a scopo illustrativo. Nel codice reale, è necessario verificare che lo stato della casella di controllo sia selezionato o deselezionato, non solo abilitarlo. Forse sarebbe meglio il codice per illustrare che:

<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> 

Inoltre, ci può essere il codice in altre aree non lo facciamo completamente il controllo, che potrebbe fare un semplice .checked = true/false - vorremmo per essere sicuri di vederlo anche

Answer 1

Le risposte esistenti funzionano perfettamente, anche con l'aggiornamento . Basta essere intelligenti e non chiamare il clic se non è necessario. Inoltre, si prega di non utilizzare JS in linea. È stato OK 10 anni fa.

<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(); 
    } 
} 

Se hai bisogno di essere modificati quando uno script modifica il valore, in Firefox, è possibile utilizzare https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

Esempio qui 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; 
}); 

Per esempio, si può usare onpropertychangehttp://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx (Grazie ai jivings per il promemoria)

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

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

Per altri browser, è necessario eseguire il polling utilizzando setInterval/setTimeout

Answer 2

Usa click()

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

Answer 3

Avere il pulsante di commutazione in realtà click la casella di controllo:

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

Se si voleva alcuna modifica la casella di informarvi della sua nuova posizione, quindi vorrei creare un metodo globale per modificare il valore della casella di controllo e gestirlo come proxy:

Ora ogni volta che si imposta o si attiva la casella di controllo, si ottiene di nuovo lo stato controllato.

Un'ultima cosa, eviterei di utilizzare l'attributo onClick e invece di associare gli eventi di clic all'interno del codice JavaScript.

Answer 4

oninput è l'evento è necessario gestire ... https://developer.mozilla.org/en/DOM/DOM_event_reference/input