L’obtention de la valeur de case à cocher HTML d’événements onclick/onchange

Question

<pre><code></code><p>OnClick et onchange est appelée avant la valeur de la case à cocher (c’est à dire : État) change et ce qui signifie à son tour le la propriété checkbox.value est toujours allumée.</p><p>Comment déterminez-vous l’événement unchecked/État compte tenu de ce comportement ?</p></pre>

Answer 1

La réponse courte:

Utiliser l' click événement, qui n'est pas le feu jusqu'à ce que après que la valeur a été mis à jour, et se déclenche lorsque vous le souhaitez:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

Exemple vivant | Source

La plus longue réponse:

L' change gestionnaire d'événement n'est pas appelé jusqu'à ce que l' checked de l'état a été mis à jour (exemple vivant | source), mais parce que (comme Tim Büthe points dans les commentaires) c'est à dire ne pas le feu à l' change , jusqu'à ce que la case à cocher perd le focus, vous n'obtenez pas la notification proactive. Le pire, c'est à dire si vous cliquez sur une étiquette pour la case (plutôt que la case elle-même) de le mettre à jour, vous pouvez avoir l'impression que vous êtes l'obtention de l'ancienne valeur (essayer avec IE ici en cliquant sur l'étiquette: exemple vivant | source). C'est parce que si la case a le focus, en cliquant sur l'étiquette prend le focus de l', le tir de l' change cas avec l'ancienne valeur, et puis l' click arrive à définir la nouvelle valeur et la mise au point de retour sur la case à cocher. Très déroutant.

Mais vous pouvez éviter tous les de la que les ennuis si vous utilisez click à la place.

J'ai utilisé DOM0 gestionnaires (onxyz attributs) parce que c'est ce que vous avez demandé sur, mais pour le record, je voudrais généralement recommandons de raccorder les gestionnaires dans le code (DOM2 de l' addEventListenerou attachEvent dans les anciennes versions d'IE) plutôt que d'utiliser onxyz attributs. Qui vous permet de connecter plusieurs gestionnaires pour le même élément et permet d'éviter de faire l'ensemble de vos gestionnaires des fonctions globales.

---

Une version antérieure de cette réponse utilisé ce code pour l' handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

L'objectif semble être de permettre au cliquez pour terminer avant de regarder la valeur. Autant que je sache, il n'y a pas de raison de faire ça, et je n'ai aucune idée de pourquoi je l'ai fait. La valeur est modifiée avant l' click gestionnaire est appelé. En fait, la spécification est tout à fait clair à ce sujet. La version sans setTimeout fonctionne parfaitement bien dans tous les navigateurs que j'ai essayé (même IE6). Je ne peux que supposer, je pensais à certains autres plate-forme où le changement n'est pas fait jusqu'à ce que après l'événement. En tout cas, aucune raison de le faire avec les cases à cocher HTML.