suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie erhalte ich den Wert eines ausgewählten Optionsfelds mithilfe von JavaScript?

Wie erhalte ich den Wert eines ausgewählten Optionsfelds mithilfe von JavaScript?

WBOY
WBOYnach vorne
2023-08-30 22:29:021980Durchsuche

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

Eine der wichtigsten HTML-Komponenten beim Entwerfen eines Formulars ist das Optionsfeld. Der Benutzer kann nur eine Option aus den durch das Optionsfeld angezeigten Optionen auswählen.

Normalerweise verwenden wir einfach das Wertattribut des Elements in JavaScript, um den Wert des Elements von der HTML-Webseite abzurufen. Aber für Optionsfelder können wir das nicht tun. Der Grund dafür ist, dass es keine gute Idee ist, den Wert einzelner Optionsfelder zu ermitteln.

Beginnen wir mit dem Lesen dieses Artikels, um zu erfahren, wie Sie den Wert des ausgewählten Optionsfelds ermitteln. Hierzu verwenden wir das Attribut „checked“.

Ausgewähltes Attribut verwenden

Die überprüften Eigenschaften sind boolesche Eigenschaften. Falls vorhanden, bedeutet dies, dass das -Element beim Laden der Seite vorab ausgewählt (markiert) werden sollte. Die Checked-Eigenschaft kann mit Kontrollkästchen- und Radio-Eingabetypen verwendet werden. Mithilfe von JavaScript kann das geprüfte Attribut auch nach dem Laden der Seite geändert werden.

Grammatik

Das Folgende ist die Syntax zum Überprüfen von Eigenschaften -

<input checked>

Schauen wir uns einige Beispiele an, um besser zu verstehen, wie man den Wert eines ausgewählten Optionsfelds ermittelt

Beispiel

Im folgenden Beispiel führen wir ein Skript aus, um den Wert des ausgewählten Optionsfelds abzurufen. 

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

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe bestehend aus Text sowie Optionsfeldern und Klickschaltflächen. Wenn der Benutzer das Optionsfeld auswählt und darauf klickt, wird in einem Popup der von Ihnen ausgewählte Wert angezeigt.

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir ein Skript ausführen, um den Wert eines ausgewählten Optionsfelds abzurufen. 

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

Wenn Sie das obige Skript ausführen, wird ein Ausgabefenster mit Text sowie Optionsfeldern und Senden-Schaltflächen angezeigt. Wenn der Benutzer das Optionsfeld auswählt und auf die Schaltfläche „Senden“ klickt, wird das Ereignis ausgelöst und zeigt den ausgewählten Wert an.

Verwenden Sie die Funktion querySelector()

Die Funktion

querySelector() gibt das erste Element des Dokuments zurück, das mit dem angegebenen Selektor oder Satz von Selektoren übereinstimmt. Wenn keine Übereinstimmung gefunden wird, wird Null zurückgegeben.

Grammatik

Das Folgende ist die Syntax von querySelector() -

querySelector(selectors)

Beispiel

Führen Sie den folgenden Code aus und beobachten Sie, wie wir den Wert des ausgewählten Optionsfelds erhalten. 

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

Wenn Sie das Skript ausführen, wird eine Ausgabe generiert, die aus Text sowie Optionsfeldern und Senden-Schaltflächen besteht. Wenn der Benutzer einen Wert auswählt und auf die Schaltfläche klickt, wird ein Fenster mit dem ausgewählten Wert angezeigt.

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Wert eines ausgewählten Optionsfelds mithilfe von JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html NULL 事件 选择器
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie erstelle ich eine asynchrone Funktion in TypeScript?Nächster Artikel：Wie erstelle ich eine asynchrone Funktion in TypeScript?

In Verbindung stehende Artikel

Mehr sehen