web-dev-qa-db-fra.com

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

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

À partir de onClickHandler et/ou onChangeHandler, comment puis-je déterminer quel est le nouvel état de la case à cocher?

javascripthtmleventsdomcheckbox
182
Maxim Gershkovich

La réponse courte:

Utilisez l'événement click, qui ne se déclenchera qu'une fois la valeur mise à 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 en direct | Source

La réponse la plus longue:

Le gestionnaire d'événements change n'est appelé que lorsque l'état checked a été mis à jour ( exemple direct | source ), mais parce que (comme Tim Büthe souligne dans les commentaires) IE ne déclenche pas l'événement change tant que la case à cocher n'est plus active, 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 sur la case elle-même) pour la mettre à jour, vous pouvez avoir l'impression que vous êtes obtenir l'ancienne valeur (essayez-la avec IE ici en cliquant sur l'étiquette: exemple live | source ). En effet, si la case à cocher a le focus, le fait de cliquer sur l’étiquette lui enlève le focus, déclenchant l’événement change avec l’ancienne valeur, puis le click définit la nouvelle valeur et rétablit le focus. la case à cocher. Très perturbant.

Mais vous pouvez éviter tout ce désagrément si vous utilisez plutôt click.

J'ai utilisé des gestionnaires DOM0 (attributs onxyz) parce que c'est ce que vous avez demandé, mais pour mémoire, je recommanderais généralement de connecter les gestionnaires au code (les propriétés DOM_ de addEventListener ou attachEvent 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 rendre toutes les fonctions globales de vos gestionnaires.

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 laisser le clic se terminer avant de regarder la valeur. Autant que je sache, il n'y a aucune raison de le faire et je ne sais pas pourquoi. La valeur est modifiée avant que le gestionnaire click soit appelé. En fait, la spécification est assez clair à ce sujet . La version sans setTimeout fonctionne parfaitement dans tous les navigateurs que j'ai essayés (même IE6). Je ne peux que supposer que je pensais à une autre autre plate-forme où le changement ne sera effectué qu'après l'événement. Dans tous les cas, aucune raison de faire cela avec les cases à cocher HTML.

342
T.J. Crowder

Utilisez ceci

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

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

    //use this value

}
</script>
7
Farhan

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)} />
}
1
Pakpoom Tiwakornkit