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

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

Maxim Gershkovich
la source

Réponses:

385

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.

TJ Crowder
la source
6
Heureusement, onchangefonctionne correctement dans +IE9. Source
Mori
Ajouter mes 2 cents ici: Il semble que IE8 (et ci-dessous, je suppose), fait la différence entre un clic vers le bas et une libération de clic ... et que la raison pour laquelle nous sommes sur cette page est parce qu'elle se déclenche sur un clic vers le bas au lieu d'un clic Libération. On dirait que les cases à cocher ne s'activent que sur une libération de clic - cliquer vers le bas puis déplacer la souris enregistrerait un clic, mais ne modifierait pas une case à cocher.
dah97765
2
On dirait que le fait de basculer la case à cocher via la navigation au clavier ( tab+ space) déclenchera également le onclickgestionnaire (vérifié dans Chrome 51, au moins).
Nate Whittaker
Comment obtenir la valeur de cette case à cocher en cliquant dessus ??
user7350714
12

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)} />
}
Pakpoom Tiwakornkit
la source
8

Utilisez ceci

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

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

    //use this value

}
</script>
Farhan
la source