So erhalten Sie mit JavaScript den Wert des ausgewählten Optionsfelds mit JavaScript?

Optionsschaltflächen sind eines der wichtigsten Elemente von HTML, wenn Sie versuchen, eine Form zu erstellen. Die Optionsfelder bieten dem Benutzer einige Optionen, aus denen er nur eine einzige Option auswählen kann.

Wenn wir den Wert eines Elements von einer HTML -Webseite erhalten möchten, verwenden wir normalerweise einfach die Werteigenschaft dieses Elements in JavaScript. Aber das können wir nicht mit Optionsknöpfen machen. Der Grund dafür ist, dass es keine gute Praxis ist, die Werte einzelner Optionsfelder zu holen. Daher möchten wir nur einen Wert und das ist das ausgewählte Optionsfeld

Der Wert des Wertes des Wertes eines ausgewählten Optionsfelds enthält die folgenden Schritte:

• Erstens: Erhalten Sie einen Hinweis auf die Gruppe der Optionsfelder in JavaScript
• Zweitens: Filtern Sie aus der Liste der Optionsfelder die mit dem "überprüft" Eigentum
• Drittens: Holen Sie sich das Wertattribut des gefilterten Optionsfelds

Erstellen wir ein Beispiel, um diese Schritte zu präsentieren.

Schritt 1: Richten Sie eine HTML-Webseite ein

Erstellen Sie eine HTML -Webseite mit den folgenden Zeilen darin:

Was würdest du gerne lernen?

Gitarre

Geige

Cajon

Lernen

In dem oben genannten Code passieren die folgenden Dinge:

• Wir erstellen einen Container, in dem wir unsere Optionsfelder und die Schaltfläche „Lernen“ einstellen werden
• Dann fragen wir den Benutzer nach dem Instrument, das er lernen möchte
• Die Auswahlmöglichkeiten sind in Form von Optionsfeldern angegeben
• Jedes Optionsknopf hat seine eigene einzigartige Ausweis Und Wert aber das gleiche Name sie gruppieren
• Dann ein Für jeden Optionsfeld wird Tag hinzugefügt
• Auf der Webseite wurde eine Schaltfläche hinzugefügt, um die Wahl des Benutzers zu senden.

Starten Sie die HTML -Webseite und Sie erhalten diese Ausgabe auf Ihrem Browser.

Wir haben Optionsschaltflächen und unsere Lernschaltfläche in der Mitte der Webseite.

Schritt 2: Schreiben Sie den JavaScript -Code, um die Wahl des Benutzers anzuzeigen

Wir möchten eine Funktion in der Skriptdatei ausführen, wenn wir auf die “klicken“Lernen" Taste. Daher fügen wir die folgenden Zeilen hinzu:

dokumentieren.GetElementById ("lernen").onclick = function ()
// Der nächste Code würde in sie in sie kommen
;

Holen Sie sich in dieser Funktion die DOM -Referenz unserer Optionsfeldergruppe mithilfe der folgenden Zeile

var radiobuttongroup = Dokument.GetElementsByName ("Instrument");

Filtern Sie anschließend diese Gruppe von Quartierschaltflächen, um die überprüfte zu finden, und speichern Sie sie in einer anderen Variablen mit der folgenden Zeile

var checkedRadio = Array.von (Radiobuttongroup).Find ((Radio) => Radio.überprüft);

Zuletzt fordern Sie den Benutzer über das Instrument auf, das er mit der Warnungsfunktion lernen möchte

alarm ("Sie haben ausgewählt:" + checkedRadio.Wert);

Die vollständige Skriptdatei sieht so aus

dokumentieren.GetElementById ("lernen").onclick = function ()
var radiobuttongroup = Dokument.GetElementsByName ("Instrument");
var checkedRadio = Array.von (Radiobuttongroup).finden(
(Radio) => Radio.überprüft
);
alarm ("Sie haben ausgewählt:" + checkedRadio.Wert);
;

Schritt 3: Testen des Skripts

Aktualisieren Sie die Webseite, wählen Sie ein Optionsfeld und klicken Sie dann auf die Schaltfläche mit der Aufschrift “Lernen”. Sie sollten die folgende Ausgabe erhalten:

Sie haben den Wert erfolgreich von einem geprüften Optionsschalter abgerufen und den Benutzer über seine Wahl aufmerksam gemacht.

Einpacken

Um den Wert eines ausgewählten Optionsschalters in JavaScript zu erhalten, müssen wir eine Reihe von Schritten befolgen. Der erste Schritt besteht darin, einen JavaScript -Verweis auf Optionsfelder mit demselben Namen zu erhalten. Danach möchten wir das Optionsfeld filtern, das die überprüfte Eigenschaft markiert hat. Verwenden Sie anschließend das Optionsfeld Store, um den Wert mit dem Wert -Attribut des HTML -Elements zu erhalten. Dann können Sie mit dem abgerufenen Wert arbeiten.