Abrufen des Werts des ausgewählten Optionsfelds in JavaScript

1. Abrufen des Wertes eines Radioelements mit document.querySelector() in JavaScript
2. Abfrage des Wertes eines Radioelements mit getElementsByName() in JavaScript

Ein Optionsfeld ist ein HTML-Eingabeelement, das eine Vielzahl von Optionen angibt, aus denen der Benutzer eine beliebige Option auswählen kann. In diesem Artikel werden wir lernen, wie man den Wert dieses HTML-Elements in JavaScript bekommt.

Abrufen des Wertes eines Radioelements mit document.querySelector() in JavaScript

Es ist eine grundlegende document-Technik, die von JavaScript bereitgestellt wird und den Objekt-/NodeList-Teil zurückgibt, dessen selector mit dem gewünschten selectorübereinstimmt. Der einzige Unterschied zwischen querySelector() und querySelectorAll() besteht darin, dass zuerst das einzelne übereinstimmende Elementobjekt zurückgegeben wird, dann alle Objekte des übereinstimmenden Elements. Wird ein ungültiger selector übergeben, wird ein SyntaxError zurückgeliefert.

Syntax:

document.querySelector($selector);

Der selector ist ein erforderlicher Parameter, der die Übereinstimmungsbedingung oder den Bezeichner der Klasse angibt. Diese Zeichenfolge muss eine gültige CSS-Auswahlzeichenfolge sein. Es gibt das erste übereinstimmende Elementobjekt zurück, das die Bedingung selector im DOM erfüllt.

Lesen Sie für weitere Informationen die Dokumentation der Methode querySelector.

Beispielcode:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female" checked="checked">Female

<button type="button" onclick="console.log(document.querySelector('input[name=gender]:checked').value)">
Click to check
</button>

Im obigen Code haben wir zwei Eingabeelemente mit den Werten Male und Female definiert. Wenn wir mit querySelector() auf das Dokument zugreifen, findet es alle Knoten, deren Namensattribut zum Geschlecht passt und deren checked-Attribut auf true gesetzt ist. Da es sich um ein Objekt handelt, können wir den Wert direkt extrahieren. Wenn Sie mehr als ein passendes Element finden müssen, können Sie querySelectorAll() verwenden und das Array durchlaufen und alle Werte drucken. Die Ausgabe des obigen Codes sieht folgendermaßen aus:

Ausgabe:

Female

Abfrage des Wertes eines Radioelements mit getElementsByName() in JavaScript

Dies ist eine grundlegende document-Technik, die von JavaScript bereitgestellt wird und den Objects/NodeList-Teil zurückgibt, dessen name-Attribut mit dem gewünschten Namen übereinstimmt. Diese NodeList stellt ein Array von Knoten dar, auf die über einen Index zugegriffen werden kann, und dieser Index beginnt wie jedes andere Array mit 0.

Syntax

document.getElementsByName(name);

name ist ein erforderlicher Parameter, der den name eines HTML-Attributs angibt, das übereinstimmen muss. Wenn übereinstimmende Elemente gefunden werden, wird das Objekt des übereinstimmenden DOM-Elements zurückgegeben; andernfalls wird null zurückgegeben.

Der einzige Unterschied zwischen getElementsByName und querySelectorAll besteht darin, dass getElementsByName zuerst nur diejenigen Elemente auswählt, deren angegebenes Namensattribut mit dem angegebenen Namen übereinstimmt. Im Gegensatz dazu kann querySelectorAll jeden beliebigen Selektor verwenden, was ihm viel mehr Flexibilität verleiht.

Lesen Sie für weitere Informationen die Dokumentation der Methode getElementById.

Beispielcode:

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female

const radios = document.getElementsByName('gender');

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    console.log(radios[i].value);
    break;
  }
}

Im obigen Code haben wir zwei Eingabeelemente mit den Werten Male und Female definiert. Wenn wir mit getElementsByName() auf das Dokument zugreifen, findet es alle Knoten, deren Namensattribut mit dem Namen übereinstimmt, und gibt NodeList zurück. Da es sich um ein Array handelt, können wir mit [0] das erste passende Element extrahieren. Wenn mehr als ein übereinstimmendes Element gefunden wird, können Sie das Array durchsuchen und alle Werte drucken. Die Ausgabe des obigen Codes sieht folgendermaßen aus:

Ausgabe:

Male