Déclencher un événement sur entrée.checked=true/false _without_ jQuery

Considérons le code suivant (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 vous cliquez sur la case à cocher, vous recevez une alerte vous indiquant si elle est cochée ou non. Grand. Toutefois, si vous cliquez sur le bouton bascule, la case à cocher change d'état coché mais l'événement onchange n'est PAS déclenché.

Essentiellement, le onchange pour une case à cocher se déclenche uniquement si l'utilisateur clique sur la case, pas si la case est modifié via JavaScript. C'est vrai dans IE, FF et Chrome. Il semble que ce comportement est à la spécification également.

Cependant, j'ai vraiment besoin d'une sorte de cas d'incendie si, pour une raison quelconque, la case est cochée, les modifications de l'état. Est-ce possible?

Oh ouais, et jQuery n'est pas autorisé. Et s'il vous plaît pas setTimeout/setInterval solutions à base de...

Mise à jour: Aussi, il faut préciser que le code ci-dessus est à titre d'illustration uniquement. Dans le code réel, nous devons nous assurer de l'état de la case à cocher est cochée ou décochée, pas seulement de l'activer. Peut-être que ce serait mieux de code pour illustrer le fait 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>

En outre, il peut y avoir des code dans d'autres domaines, nous ne sommes pas entièrement le contrôle, ce qui pourrait faire un simple .checked=true/false -- nous aimerions nous assurer de voir que.

jQuery ne serait pas le feu le natif de l'événement de changement de juste en fixant sa valeur
Quel est le problème avec les délais d'attente? Je ne pense pas qu'il y a autre chose qui va travailler.
Je ne peux pas croire que vous demandé quel est le problème avec les bureaux de l'aide d'un délai d'attente. C'est comme lancer des cycles de loin,et l'ajout d'un délai lorsque vous êtes averti. Le moins de délai, plus vous perdez de cycles CPU. Il y a beaucoup de réponses ici qui satisfont à l'exigence de l'OP
Pas avec les restrictions qu'il est imposé sur la solution. Il veut savoir quand le checked des modifications de la propriété.
C'est vrai, je n'ai pas vu la partie où l'OP dit que certaines autres parties du code peut être simplement mise checked=true directement. Avec cet avertissement, l'interrogation est la seule réponse. Sauf dans les FF, où vous pouvez utiliser Object.watch Voir plus de ma réponse.

OriginalL'auteur jwl | 2012-05-17

  1. 7

    La les réponses existantes fonctionnent parfaitement, même avec votre mise à jour. Juste être intelligent et ne pas appeler cliquez sur si vous n'avez pas besoin d'. Aussi, s'il vous plaît ne pas utiliser inline JS. C'était bien, il y a 10 ans.

    <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 vous avez besoin d'être modifié lorsqu'un script modifie la valeur, dans Firefox, vous pouvez utiliser https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

    Exemple ici 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;
});

    Pour dire que vous pouvez utiliser onpropertychange http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs. 85).aspx (Grâce à jivings pour le rappel)

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

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

    Pour les autres navigateurs, vous disposez d'un sondage à l'aide de la méthode setInterval/setTimeout

    Des commentaires à ce sujet? Cela résout le problème pour 2 des 4 principaux navigateurs.
    Ce qui semble maintenant être une collection de réponses +1 de moi.
    merci pour l'effort que vous mettez dans cette. Je pense que vous avez couvert toutes les bases, et quelque chose comme votre premier bloc de code est à la fin de ce que je suis allé avec. Nous allons exiger spécifiquement l'appel d'une setCheck fonction de cocher/décocher en javascript, et si d'autres programmeurs oublier et juste ele.checked=true/false, triste à ce sujet. FWIW, je n'ai utilisé le JavaScript en ligne pour cet exemple, pas en général 😛

    OriginalL'auteur Juan Mendes

  2. 2

    Ont le bouton basculer en fait cliquez sur la case:

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

    Si vous voulais que tout changement à la case afin de vous informer de sa nouvelle position, puis je voudrais créer une méthode globale pour la modification de la valeur de la case, et de le traiter comme 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" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

    Maintenant, quand vous le régler ou activer /désactiver la case à cocher, vous obtiendrez l'état activé en arrière.

    Une dernière chose, je voudrais éviter d'utiliser le onClick attribut, et, au lieu de lier les événements de clic depuis votre JavaScript.

    Bonne suggestion MAIS nous devons faire en sorte que si un autre code que nous ne contrôlons pas fait un checked=true/false que nous attrapons aussi. En outre, nous n'avons pas vraiment besoin d'une bascule comme mon exemple peut avoir induit en erreur, on a besoin de définir explicitement vrai ou faux.
    Désolé, mais c'était une mauvaise question.
    Je voudrais vous encourager à utiliser une méthode d'approximation de cliquer sur la case à cocher puis.
    ouais, j'aurais été plus clair
    La chose est que nous n'avons pas le contrôle à 100% du code qui pourrait cochez la case correspondante.

    OriginalL'auteur Sampson

  3. 1

    Utilisation cliquez sur()

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

    OriginalL'auteur Jivings

  4. -1

    oninput est le cas, vous devez gérer ...
    https://developer.mozilla.org/en/DOM/DOM_event_reference/input

    Ne fonctionne pas pour moi jsfiddle.net/D8PXP

    OriginalL'auteur Sachin Nayak