Comment gérer les événements de coche et de décoche pour les boutons radio en JavaScript ?

Événement OnChange pour les boutons radio : gestion des événements à cocher et à décocher

Lorsque vous travaillez avec des boutons radio, il est essentiel de gérer efficacement les événements à cocher et à décocher. L'événement onChange standard ne répond pas à cela, car il ne se déclenche que lorsqu'un bouton radio est sélectionné. Cela laisse un vide dans l'identification du moment où une sélection précédente est désélectionnée.

Solution de contournement pour l'événement OnChange :

Considérez l'extrait de code suivant :

<code class="js">var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}</code>

Ce script accomplit l'objectif souhaité. comportement :

1. Il parcourt tous les boutons radio.
2. Pour chaque bouton radio, un écouteur d'événement est ajouté à l'événement onChange.
3. Lorsqu'un bouton radio est coché, il enregistre la valeur du bouton radio précédemment coché (s'il y en avait un) et met à jour la référence au bouton radio actuellement coché.

Cette solution capture à la fois les événements cochés et décochés, vous permettant de accéder aux valeurs des boutons radio précédemment et actuellement cochés.

Limitations de l'événement OnClick :

L'événement onClick, bien que plus cohérent dans tous les navigateurs, ne résout toujours pas le problème de la capture des événements de décoche . Par conséquent, même si cela peut être envisagé pour certains cas d'utilisation, il ne s'agit pas d'une solution complète pour gérer à la fois les événements de coche et de décoche avec des boutons radio.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!