Obtenir la valeur d'une case à cocher HTML à partir des événements onclick/onchange

La réponse courte:

Utilisez l'événement "click", qui ne se déclenchera qu'après la mise à jour de la valeur, et qui se déclenche quand vous le souhaitez :

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

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

[Exemple concret][1] | [Source][2]

La réponse la plus longue:

Le gestionnaire d'événement change n'est pas appelé tant que l'état checked n'a pas été mis à jour ([live example][3] | [source][4]), mais comme (comme le souligne Tim Büthe dans les commentaires) IE ne déclenche pas l'événement change avant que la case à cocher ne perde le focus, vous n'obtenez pas la notification de manière proactive. Pire encore, avec IE, si vous cliquez sur un étiquette de la case à cocher (plutôt que sur la case elle-même) pour la mettre à jour, vous pouvez avoir l'impression d'obtenir l'ancienne valeur (essayez avec IE en cliquant sur l'étiquette : [live example][5] | [source][6]). En effet, si la case à cocher a le focus, le fait de cliquer sur l'étiquette l'enlève, ce qui déclenche l'événement change avec l'ancienne valeur, puis le click définit la nouvelle valeur et remet le focus sur la case à cocher. C'est très déroutant.

Mais vous pouvez éviter tous ces désagréments si vous utilisez click à la place.

J'ai utilisé les gestionnaires DOM0 (attributs onxyz) parce que c'est ce que vous m'avez demandé, mais pour mémoire, je recommande généralement de connecter les gestionnaires dans le code (DOM2's addEventListener, ou attachEvent dans les anciennes versions d'IE) plutôt que d'utiliser les attributs onxyz. Cela vous permet d'attacher plusieurs gestionnaires au même élément et d'éviter de faire de tous 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 faire cela, et je n'ai aucune idée de la raison pour laquelle je l'ai fait. La valeur est modifiée avant que le gestionnaire click ne soit appelé. En fait, la spécification est [très claire à ce sujet] (http://www.w3.org/TR/html5/forms.html#checkbox-state-(type=checkbox)). La version sans setTimeout fonctionne parfaitement bien dans tous les navigateurs que j'ai essayés (même IE6). Je ne peux que supposer que je pensais à une autre plateforme où le changement n'est effectué qu'après l'événement. Dans tous les cas, il n'y a aucune raison de faire cela avec des cases à cocher HTML.

[1] : http://jsbin.com/ijoqep/3 [2] : http://jsbin.com/ijoqep/3/edit [3] : http://jsbin.com/ijoqep/1 [4] : http://jsbin.com/ijoqep/1/edit [5] : http://jsbin.com/ijoqep/2 [6] : http://jsbin.com/ijoqep/2/edit

Utilisez cette

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

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

    //use this value

}
</script>

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

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