Obtenir la valeur de la case à cocher HTML à partir des événements onclick / onchange

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

De l'intérieur onClickHandleret / ou onChangeHandler, comment puis-je déterminer quel est le nouvel état de la case à cocher?

La réponse courte:

Utilisez l' clickévénement, qui ne se déclenche qu'après la mise à jour de la valeur, 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 en direct | La source

La réponse plus longue:

Le changegestionnaire d'événements n'est appelé que lorsque l' checkedétat a été mis à jour ( exemple en direct | source ), mais parce que (comme le souligne Tim Büthe dans les commentaires) IE ne déclenche l' changeévénement que lorsque la case à cocher perd le focus, vous n'obtenez pas la notification de manière proactive. Pire, avec IE si vous cliquez sur une étiquette pour la case à cocher (plutôt que la case à cocher elle-même) pour la mettre à jour, vous pouvez avoir l'impression que vous obtenez l'ancienne valeur (essayez-la avec IE ici en cliquant sur l'étiquette: exemple en direct | source ). En effet, si la case à cocher a le focus, cliquer sur l'étiquette l'éloigne du focus, déclencher l' changeévénement avec l'ancienne valeur, puis leclick arrive en définissant la nouvelle valeur et en redéfinissant le focus sur la case à cocher.

Mais vous pouvez éviter tout ce désagrément si vous utilisez à la clickplace.

J'ai utilisé des gestionnaires DOM0 ( onxyzattributs) parce que c'est ce que vous avez demandé, mais pour mémoire, je recommanderais généralement de connecter les gestionnaires dans le code (DOM2 addEventListenerou attachEventdans les anciennes versions d'IE) plutôt que d'utiliser des onxyzattributs. Cela vous permet d'attacher plusieurs gestionnaires au même élément et vous évite de faire de toutes vos gestionnaires des fonctions globales.

Une version antérieure de cette réponse utilisait ce code pour handleClick:

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

L'objectif semblait être de permettre au clic de se terminer avant de regarder la valeur. Pour autant que je sache, il n'y a aucune raison de le faire, et je n'ai aucune idée pourquoi je l'ai fait. La valeur est modifiée avant l' clickappel du gestionnaire. En fait, la spécification est assez claire à ce sujet . La version sans setTimeoutfonctionne parfaitement bien dans tous les navigateurs que j'ai essayés (même IE6). Je peux seulement supposer que je pensais à une autre plate-forme où le changement ne se fait qu'après l'événement. Dans tous les cas, aucune raison de le faire avec des cases à cocher HTML.

Pour React.js, vous pouvez le faire avec un code plus lisible. J'espère que ça aide.

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

Utilisez ceci

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>