Comment pouvez-vous suivre les états cochés et non cochés des boutons radio en JavaScript ?

Gestionnaire OnChange amélioré pour les boutons radio

Dans cet article, nous explorons le défi de la gestion efficace des événements onchange pour les groupes de boutons radio. Par défaut, l'événement onchange de JavaScript pour les boutons radio se déclenche uniquement lorsqu'un bouton est coché, et non lorsqu'il est décoché.

Comprendre le problème

Considérez un scénario avec plusieurs radios boutons portant le même nom dans un formulaire. Lorsqu'un formulaire est soumis, un seul bouton radio doit être sélectionné et sa valeur est envoyée avec les données du formulaire. Cependant, l'événement onchange ne fournit pas de mécanisme pour capturer la transition d'un bouton sélectionné à un autre.

Ce comportement peut poser un problème dans les situations où vous devez suivre à la fois les boutons nouvellement cochés et ceux précédemment cochés. . Par exemple, dans un formulaire dynamique, vous souhaiterez peut-être effectuer des actions spécifiques ou mettre à jour l'interface utilisateur en fonction des modifications apportées à la sélection du bouton radio.

Solution de contournement à l'aide d'écouteurs d'événements

Une solution de contournement consiste à utiliser des écouteurs d'événements attachés à l'événement de changement de chaque bouton radio. En écoutant l'événement de changement de chaque bouton individuellement, nous pouvons garder une trace du bouton précédemment coché.

<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>

Dans ce code, nous parcourons les boutons radio, attachons un écouteur de changement à chacun d'eux et définir une variable prev pour stocker le bouton précédemment coché. Lorsqu'un événement de modification d'un bouton est déclenché, nous récupérons la valeur du bouton précédemment coché (le cas échéant), enregistrons les valeurs du bouton précédent et du nouveau bouton coché, et mettons à jour prev pour faire référence au bouton nouvellement coché.

Ceci Cette approche nous permet de capturer à la fois les états cochés et non cochés des boutons radio, fournissant ainsi un mécanisme de gestion des événements plus complet.

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!