Maison > interface Web > js tutoriel > le corps du texte

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

Barbara Streisand
Libérer: 2024-10-31 05:31:30
original
631 Les gens l'ont consulté

How to Handle Both Check and Uncheck Events for Radio Buttons in 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal