Comment suivre les valeurs des boutons radio désélectionnés avec les événements OnChange ?

Solution de contournement pour l'événement OnChange dans la valeur du bouton radio

Lorsque vous utilisez des boutons radio du même nom, vous pouvez rencontrer une limitation où l'événement onChange ne se déclenche pas lorsqu’un bouton radio est désélectionné. Cela peut créer des difficultés dans le suivi de la valeur précédemment sélectionnée.

Approche de la solution

Pour surmonter cela, vous pouvez utiliser une combinaison de techniques :

1. Itérer sur les boutons radio : Itérer sur tous les boutons radio portant le même nom à l'aide de JavaScript.
2. Écouteur d'événement pour le changement : Ajouter un écouteur d'événement pour l'événement de changement à chaque bouton radio.
3. Radio précédente : Initialisez une variable, prev, en dehors de l'écouteur d'événement pour stocker initialement une valeur nulle.

4. Dans Écouteur d'événement : Dans l'écouteur d'événements, les actions suivantes se produisent :

   • S'il existe une valeur précédente, enregistrez sa valeur dans la console.
   • Mettez à jour la valeur précédente pour le bouton radio actuel.
   • Enregistrez la valeur du bouton radio actuel sur la console.

Exemple de code :

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

Exemple de formulaire :

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1">
  <input type="radio" name="myRadios"  value="2">
</form></code>

Notes supplémentaires :

• Cette approche vous permet de suivre à la fois le précédemment sélectionnées et les valeurs des boutons radio nouvellement sélectionnées.
• Le concept peut être étendu pour gérer plusieurs groupes de 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!