Maison > Article > interface Web > Comment vérifier si un bouton radio est sélectionné à l'aide de JavaScript ?

Comment vérifier si un bouton radio est sélectionné à l'aide de JavaScript ?

王林avant: 2023-08-24 21:49:021907parcourir

如何使用 JavaScript 检查单选按钮是否被选中？

En HTML, les boutons Radio permettent aux développeurs de créer plusieurs options pour une sélection. L'utilisateur peut sélectionner n'importe quelle option et nous pouvons obtenir sa valeur et savoir quelle option l'utilisateur a sélectionnée parmi plusieurs options.

Par conséquent, il est important de vérifier quel bouton radio l'utilisateur a sélectionné pour comprendre son choix parmi plusieurs options. Comprenons-le à travers des exemples concrets. Lorsque vous remplissez un formulaire et demandez à choisir votre sexe, vous pouvez voir qu’ils vous proposent trois options et que vous ne pouvez en choisir qu’une.

Dans ce tutoriel, nous apprendrons deux façons de vérifier si un bouton radio est sélectionné à l'aide de JavaScript.

Utilisez l'attribut coché du bouton radio

Nous pouvons accéder à l'élément radio en JavaScript en utilisant différentes méthodes. Après cela, nous pouvons vérifier si le bouton radio sélectionné est coché ou non en utilisant sa propriété cochée. Si la valeur de l'attribut coché est vraie, cela signifie que le bouton radio est sélectionné ; sinon, il n'est pas sélectionné ;

Grammaire

Les utilisateurs peuvent vérifier si le bouton radio est coché à l'aide de l'attribut checked de l'élément radio selon la syntaxe suivante.

<input type = "radio" name = "radio" value = "male" id = "radio1" > Male</input> 
<script>
   let radio1 = document.getElementById('radio1');
   if(radio1.checked){
      // radio1 is checked
   }
</script>

Dans la syntaxe ci-dessus, nous accédons au bouton radio en utilisant son identifiant et utilisons l'attribut vérifié pour vérifier si le bouton radio est sélectionné dans l'instruction if.

Exemple

Dans l'exemple ci-dessous, nous avons créé trois boutons radio avec des valeurs différentes telles que Mâle, Femelle, etc. En JavaScript, nous accédons à chaque bouton radio par son identifiant et vérifions la valeur de l'attribut "checked" de chaque bouton radio.

Lorsque l'utilisateur sélectionne un bouton radio et clique dessus, il verra un message indiquant la valeur du bouton radio sélectionné.

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected.</h3>
   <input type = "radio" name = "radio" value = "male" id = "radio1" > Male </input> <br>
   <input type = "radio" name = "radio" value = "female" id = "radio2" > Female </input><br>
   <input type = "radio" name = "radio" value = "other" id = "radio3" /> Other </input>
   <p id = "output"> </p>
   <button onclick = "checkRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function checkRadio(){
         // accessing the radio buttons
         let radio1 = document.getElementById('radio1');
         let radio2 = document.getElementById('radio2');
         let radio3 = document.getElementById('radio3');
         // checking if any radio button is selected
         if(radio1.checked){
            output.innerHTML = "The radio button with value " + radio1.value + " is checked!";
         }
         if(radio2.checked){
            output.innerHTML = "The radio button with value " + radio2.value + " is checked!";
         }
         if(radio3.checked){
            output.innerHTML = "The radio button with value " + radio3.value + " is checked!";
         }
      }
   </script>
</body>
</html>

Exemple

L'exemple ci-dessous est presque le même que celui ci-dessus, mais la différence est que nous accédons à tous les boutons radio en même temps en utilisant leurs noms. La méthode getElementByName() renvoie tous les éléments radio nommés radio.

Après cela, nous utilisons une boucle for-of pour parcourir le tableau de boutons radio et vérifier si chaque bouton radio est coché à l'aide de l'attribut "checked".

<html>
<body>
   <h3>Using the <i>checked property</i> of the radio button to check whether a radio button is selected</h3>
   <input type = "radio" name = "radio" value = "10" id = "radio1"> 10 </input> <br>
   <input type = "radio" name = "radio" value = "20" id = "radio2"> 20 </input> <br>
   <input type = "radio" name = "radio" value = "30" id = "radio3" /> 30 </input>
   <p id = "output"> </p>
   <button onclick = "getSelectedRadio()"> Check radio </button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         let radioButtons = document.getElementsByName('radio');
         for (let radio of radioButtons) {
            if (radio.checked) {
               output.innerHTML = "The radio button is selected and it's value is " + radio.value;
            }
         }
      }
   </script>
</body>
</html>

Utilisez la méthode querySelector() pour vérifier si le bouton radio est sélectionné

Les programmeurs peuvent utiliser la méthode querySelector() de JavaScript pour sélectionner n'importe quel élément HTML. Ici, nous utilisons la méthode querySelector() pour sélectionner uniquement les boutons radio sélectionnés. Si le bouton radio n'est pas sélectionné, une valeur nulle est renvoyée.

Grammaire

Les utilisateurs peuvent utiliser la méthode querySelector() selon la syntaxe suivante pour vérifier si le bouton radio est sélectionné.

var selected = document.querySelector('input[name="year"]:checked');

Dans la syntaxe ci-dessus, « année » est le nom du groupe de boutons radio et renvoie tout bouton radio appartenant au groupe « année » et sélectionné.

Exemple

Dans l'exemple ci-dessous, nous avons créé trois boutons radio pour proposer à l'utilisateur trois choix différents. Lorsque l'utilisateur clique sur le bouton « Vérifier l'année sélectionnée », il appelle la fonction getSelectedRadio(), qui sélectionne le bouton radio nommé « année » à l'aide de la méthode querySelector() et le vérifie depuis le DOM.

Les utilisateurs peuvent cliquer sur les boutons et observer la sortie sans sélectionner de bouton radio.

<html>
<body>
   <h3>Using the <i> querySelector() method </i> to check whether a radio button is selected.</h3>
   <input type = "radio" name = "year" value = "1999" id = "radio1"> 1999 </input><br>
   <input type = "radio" name = "year" value = "2021" id = "radio2"> 2021 </input><br>
   <input type = "radio" name = "year" value = "2001" id = "radio3" /> 2001 </input>
   <p id="output"></p>
   <button onclick="getSelectedRadio()">Check selected year</button>
   <script>
      let output = document.getElementById("output");
      function getSelectedRadio() {
         var selected = document.querySelector(
         'input[name="year"]:checked');
         if (selected) {
            output.innerHTML += "Radio button is selected."
         } else {
            output.innerHTML += "Not any radio button is selected!"
         }
      }
   </script>
</body>
</html>

Les utilisateurs ont appris deux manières différentes d'obtenir le bouton radio sélectionné à l'aide de JavaScript. La meilleure façon est d’utiliser la méthode querySelector() car nous n’avons besoin d’écrire qu’une seule ligne de code.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Vérifier le mot de passe à l'aide de JavaScriptArticle suivant：Vérifier le mot de passe à l'aide de JavaScript

Articles Liés

Voir plus