Comment obtenir la valeur d'un bouton radio sélectionné en utilisant JavaScript ?-js tutoriel-php.cn

Comment obtenir la valeur d'un bouton radio sélectionné en utilisant JavaScript ?

WBOY

Libérer： 2023-08-30 22:29:02

avant

1908 Les gens l'ont consulté

如何使用 JavaScript 获取选定单选按钮的值？

L'un des composants HTML les plus importants lorsque l'on essaie de concevoir un formulaire est le bouton radio. L'utilisateur ne peut sélectionner qu'une seule option parmi les options affichées par le bouton radio.

Habituellement, nous utilisons simplement l'attribut value de l'élément en JavaScript pour récupérer la valeur de l'élément à partir de la page Web HTML. Mais pour les boutons radio, nous ne pouvons pas faire ça. La raison en est qu’obtenir la valeur de chaque bouton radio est une mauvaise idée.

Commençons par lire cet article pour savoir comment obtenir la valeur du bouton radio sélectionné. Pour cela, nous utiliserons l'attribut vérifié.

Utiliser l'attribut sélectionné

Les propriétés vérifiées sont des propriétés booléennes. S'il est présent, il indique que l'élément doit être présélectionné (coché) lors du chargement de la page. La propriété Checked peut être utilisée avec les types d’entrée case à cocher et radio. En utilisant JavaScript, l'attribut vérifié peut également être modifié après le chargement de la page.

Grammaire

Voici la syntaxe de vérification des propriétés -

<input checked>

Copier après la connexion

Regardons quelques exemples pour mieux comprendre comment obtenir la valeur d'un bouton radio sélectionné

Exemple

Dans l'exemple ci-dessous, nous exécutons le script pour obtenir la valeur du bouton radio sélectionné.

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1 ">
      <center>
         <div id="tutorial">
            <p>Choose The Course</p>
            <div>
               <input type="radio" id="java" name="course" value="java" />
               <label for="java">JAVA</label>
               <input type="radio" id="html" name="course" value="html" />
               <label for="html">HTML</label>
            </div>
            <button id="tutorial1">Click</button>
         </div>
      </center>
      <script>
         document.getElementById("tutorial1").onclick = function () {
            var radioButtonGroup = document.getElementsByName("course");
            var checkedRadio = Array.from(radioButtonGroup).find(
               (radio) => radio.checked
            );
            alert("The Selected Course Was : " + checkedRadio.value);
         };
      </script>
   </body>
</html>

Copier après la connexion

Lorsque le script est exécuté, il génère une sortie composée de texte ainsi que de boutons radio et de boutons de clic. Lorsque l'utilisateur sélectionne un bouton radio et clique dessus, une fenêtre contextuelle affiche la valeur que vous avez sélectionnée.

Exemple

Considérez l'exemple suivant dans lequel nous exécutons un script pour obtenir la valeur d'un bouton radio sélectionné.

<!DOCTYPE html>
<html>
   <body style="text-align:center;background-color:#D2B4DE;">
      <p>
         Choose Value And Click Submit Button
      </p>
      Choose:
      <input type="radio" name="Choose" value="LogIn">Login In
      <input type="radio" name="Choose" value="SignUp">Sign Up
      <br>
      <button type="button" onclick="getvalue()">
         Submit
      </button>
      <br>
      <div id="result"></div>
      <script>
         function getvalue() {
            var ele = document.getElementsByName('Choose');
            for(i = 0; i < ele.length; i++) {
               if(ele[i].checked)
               document.getElementById("result").innerHTML = "Choosen: "+ele[i].value;
            }
         }
      </script>
   </body>
</html>

Copier après la connexion

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra affichant du texte ainsi que des boutons radio et des boutons de soumission. Lorsque l'utilisateur sélectionne le bouton radio et clique sur le bouton Soumettre, l'événement est déclenché et affiche la valeur sélectionnée.

Utilisez la fonction querySelector()

La fonction

querySelector() renvoie le premier élément du document qui correspond au sélecteur ou à l'ensemble de sélecteurs donné. Si aucune correspondance n’est trouvée, Null est renvoyé.

Grammaire

Ce qui suit est la syntaxe de querySelector() -

querySelector(selectors)

Copier après la connexion

Exemple

Exécutez le code suivant et observez comment nous obtenons la valeur du bouton radio sélectionné.

<!DOCTYPE html>
<html>
   <body style="text-align:center;background-color:#D6EAF8 ;">
      <div id="tutorial">
         <p>Choose The Gender:</p>
         <div>
            <input type="radio" id="male" name="gender" value="Male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="Female">
            <label for="Female">Female</label>
            <input type="radio" id="others" name="gender" value="Others">
            <label for="Others">Others</label>
         </div>
         <button id="click">Submit</button>
      </div>
      <script>
         document.getElementById('click').onclick = function() {
            var selected = document.querySelector('input[type=radio][name=gender]:checked');
            alert(selected.value);
         }
      </script>
   </body>
</html>

Copier après la connexion

Lorsque vous exécutez le script, il génère une sortie composée de texte ainsi que de boutons radio et de boutons de soumission. Lorsque l'utilisateur sélectionne une valeur et clique sur le bouton, une fenêtre apparaît affichant la valeur sélectionnée.

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!