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 onClickHandler et/ou onChangeHandler , comment puis-je déterminer si le nouvel état de la case à cocher?

157
demandé sur Mark Amery 2010-12-17 17:27:57
la source

2 ответов

La réponse courte:

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

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

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

Live example | Source

La plus longue réponse:

le change event handler n'est pas appelé avant le L'état checked a été mis à jour ( live example | source ), mais parce que (comme Tim Büthe le souligne dans les commentaires) IE ne lance pas l'événement change jusqu'à ce que la case à cocher perd sa mise au point, vous ne recevez pas la notification de manière proactive. Pire, avec IE si vous cliquez sur un étiquette pour la case à cocher (plutôt que la case elle-même) pour la mettre à jour, vous pouvez avoir l'impression que vous obtenez l'ancienne valeur (essayer avec IE ici en cliquant sur l'étiquette: live exemple | source ). C'est parce que si la case à cocher a la mise au point, cliquer sur l'étiquette enlève la mise au point, en lançant l'événement change avec l'ancienne valeur, et puis le click arrive à définir la nouvelle valeur et à remettre la mise au point sur la case à cocher. Très déroutant.

mais vous pouvez éviter tout ce désagrément si vous utilisez click à la place.

J'ai utilisé des handlers DOM0 (attributs onxyz ) parce que c'est ce que vous avez demandé, mais pour mémoire, je recommande généralement d'accrocher des handlers en code ( addEventListener de DOM2 , ou attachEvent dans les versions plus anciennes D'IE) plutôt que d'utiliser des attributs onxyz . Cela vous permet d'attacher plusieurs gestionnaires au même élément et vous permet d'éviter de faire de tous vos gestionnaires des fonctions globales.


une version antérieure de cette réponse utilisé ce code pour 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. Pour autant que je sache, il n'y a aucune raison de faire ça, et je ne sais pas pourquoi je l'ai fait. La valeur est changée avant que le gestionnaire click ne soit appelé. En fait, la spécification est très clair sur ce . La version sans setTimeout fonctionne parfaitement dans tous les navigateurs que j'ai essayé (même IE6). Je ne peux que supposer que j'étais je pense à quelque autre plate-forme où le changement ne se fait qu'après l'événement. Dans tous les cas, aucune raison de faire cela avec des cases à cocher HTML.

300
répondu T.J. Crowder 2013-05-14 12:06:13
la source

utiliser cette

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

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

    //use this value

}
</script>
2
répondu Farhan 2017-03-07 19:06:26
la source

Autres questions sur javascript dom html events checkbox