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

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)
    });
}

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>

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!