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

Comment capturer les événements de désélection de boutons radio : au-delà des limitations d'onChange

Susan Sarandon
Libérer: 2024-10-30 10:24:27
original
191 Les gens l'ont consulté

How to Capture Radio Button Deselection Events: Beyond onChange Limitations

Confusion des boutons radio : résolution des limitations d'onChange

Les boutons radio constituent un moyen pratique de gérer des sélections uniques, mais la capture de leurs changements d'état complets peut être stimulant. Considérons un scénario dans lequel nous avons plusieurs boutons radio portant le même nom et devons suivre à la fois les sélections et les désélections.

L'événement onChange semble être un choix évident, mais il ne se déclenche pas lorsqu'un bouton radio est désélectionné. Cela crée un problème dans les scénarios où nous devons capturer à la fois les événements cochés et non cochés.

Solution de contournement

Une solution de contournement consiste à utiliser la méthode addEventListener et à attacher un gestionnaire d'événements de modification. à chaque bouton radio. À l'intérieur du gestionnaire d'événements, nous pouvons conserver une référence au bouton radio précédemment coché (prev) à l'aide d'une variable.

Lorsqu'un bouton radio est coché, nous enregistrons à la fois la valeur précédente (prev.value) et la valeur actuelle. valeur (this.value). Cela nous permet de capturer les événements cochés et non cochés.

<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)
    });
}
Copier après la connexion

Le code HTML qui l'accompagne :

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>
Copier après la connexion

Avec cette solution de contournement, nous disposons d'une solution généralisée qui capture les événements onChange pour toutes les radios. boutons, y compris les événements de désélection.

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!