Heim >Web-Frontend >js-Tutorial >Wie kann ich mithilfe von JavaScript überprüfen, ob ein Optionsfeld ausgewählt ist?

Wie kann ich mithilfe von JavaScript überprüfen, ob ein Optionsfeld ausgewählt ist?

王林nach vorne: 2023-08-24 21:49:021995Durchsuche

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

In HTML ermöglichen RadioButtons Entwicklern, mehrere Optionen für eine Auswahl zu erstellen. Der Benutzer kann jede Option auswählen und wir können ihren Wert ermitteln und wissen, welche Option der Benutzer aus mehreren Optionen ausgewählt hat.

Daher ist es wichtig zu überprüfen, welches Optionsfeld der Benutzer ausgewählt hat, um seine Auswahl aus mehreren Optionen zu verstehen. Lassen Sie es uns anhand von Beispielen aus dem wirklichen Leben verstehen. Wenn Sie ein Formular ausfüllen und nach dem Geschlecht fragen, sehen Sie, dass Ihnen drei Optionen angeboten werden und Sie nur eine auswählen können.

In diesem Tutorial lernen wir zwei Möglichkeiten kennen, mit JavaScript zu überprüfen, ob eine Radio-Schaltfläche ausgewählt ist.

Verwenden Sie das aktivierte Attribut des Optionsfelds

Wir können mit verschiedenen Methoden auf das radio-Element in JavaScript zugreifen. Danach können wir anhand der aktivierten Eigenschaft überprüfen, ob das ausgewählte Optionsfeld aktiviert ist oder nicht. Wenn der Wert des überprüften Attributs wahr ist, bedeutet dies, dass das Optionsfeld ausgewählt ist. Andernfalls ist es nicht ausgewählt.

Grammatik

Benutzer können mithilfe des Attributs checked des Elements radio gemäß der folgenden Syntax überprüfen, ob die Schaltfläche radio aktiviert ist.

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

In der obigen Syntax greifen wir über seine ID auf das Optionsfeld zu und verwenden das überprüfte Attribut, um zu prüfen, ob das Optionsfeld in der if-Anweisung ausgewählt ist.

Beispiel

Im folgenden Beispiel haben wir drei Optionsfelder mit unterschiedlichen Werten erstellt, z. B. männlich, weiblich usw. In JavaScript greifen wir auf jedes Optionsfeld über seine ID zu und prüfen den Wert des „checked“-Attributs jedes Optionsfelds.

Wenn der Benutzer ein Optionsfeld auswählt und darauf klickt, wird ihm eine Meldung mit dem Wert des ausgewählten Optionsfelds angezeigt.

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

Beispiel

Das folgende Beispiel ist fast das gleiche wie das obige, der Unterschied besteht jedoch darin, dass wir über deren Namen auf alle Optionsfelder gleichzeitig zugreifen. Die Methode getElementByName() gibt alle Radioelemente mit dem Namen radio zurück.

Danach durchlaufen wir mit einer for-of-Schleife das Optionsfeld-Array und prüfen mithilfe des Attributs „checked“, ob jedes Optionsfeld aktiviert ist.

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

Verwenden Sie die Methode querySelector(), um zu überprüfen, ob das Optionsfeld ausgewählt ist

Programmierer können die querySelector()-Methode von JavaScript verwenden, um jedes HTML-Element auszuwählen. Hier verwenden wir die Methode querySelector(), um nur die ausgewählten Optionsfelder auszuwählen. Wenn das Optionsfeld nicht ausgewählt ist, wird ein Nullwert zurückgegeben.

Grammatik

Benutzer können die Methode querySelector() gemäß der folgenden Syntax verwenden, um zu überprüfen, ob das Optionsfeld ausgewählt ist.

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

In der obigen Syntax ist „Jahr“ der Name der Optionsfeldgruppe und es werden alle Optionsfelder zurückgegeben, die zur Gruppe „Jahr“ gehören und ausgewählt sind.

Beispiel

Im folgenden Beispiel haben wir drei Optionsfelder erstellt, um dem Benutzer drei verschiedene Auswahlmöglichkeiten zu bieten. Wenn der Benutzer auf die Schaltfläche „Ausgewähltes Jahr prüfen“ klickt, ruft er die Funktion getSelectedRadio() auf, die mit der Methode querySelector() das Optionsfeld „Jahr“ auswählt und es aus dem DOM überprüft.

Benutzer können auf Schaltflächen klicken und die Ausgabe beobachten, ohne ein Optionsfeld auszuwählen.

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

Benutzer haben zwei verschiedene Möglichkeiten kennengelernt, um das ausgewählte Optionsfeld mithilfe von JavaScript abzurufen. Der beste Weg ist die Verwendung der Methode querySelector(), da wir nur eine Codezeile schreiben müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript überprüfen, ob ein Optionsfeld ausgewählt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Überprüfen Sie das Passwort mithilfe von JavaScriptNächster Artikel：Überprüfen Sie das Passwort mithilfe von JavaScript

In Verbindung stehende Artikel

Mehr sehen