So nehmen Sie Eingaben mit Optionsfeldern in JavaScript ein

JavaScript ist eine Programmiersprache, die unseren Webanwendungen und Webseiten die Möglichkeit gibt, zu denken und zu handeln, indem sie sie interaktiv machen. JavaScript bietet uns Optionsfelder, mit denen eine Gruppe verwandter Optionen mit nur einem Optionsknopf gleichzeitig eingerichtet werden. Optionsschaltflächen werden hauptsächlich in Formularen verwendet und mit dem Element von HTML verwendet. Optionsschaltflächen sind sehr praktisch, wenn der Entwickler möchte, dass der Benutzer nur eine Option aus den angegebenen mehreren Optionen auswählt.

Beispiel. Optionsschaltflächen sind nützlich, um diese Aufgabe zu erreichen. Zuerst definieren wir Optionsfelder in HTML und gehen dann auf JavaScript zu.

Html

Wählen Sie Ihre bevorzugte Option

Email

Telefon

Im obigen HTML -Code verwendeten wir zwei Optionsfelder und gaben den Namen des Kontakts. Es ist notwendig, derselben Gruppe von Quartierschaltflächen denselben Namen zu geben, damit nur einer gleichzeitig ausgewählt werden kann. Wir haben auch Etiketten verwendet, um unsere Eingabe -Optionsfelder zu kennzeichnen. Wir werden die folgende Ausgabe in unserem Browser sehen, wenn wir den obigen Code ausführen:

Wir können auch sehen, dass zu einem bestimmten Zeitpunkt nur ein Optionsfeld ausgewählt werden kann. Bevor wir uns auf den JavaScript -Teil begeben, lassen Sie uns auch eine Einreichung in HTML einleiten, damit wir später auf Ereignisse auf dieser Schaltfläche hören können.

Wählen Sie Ihre bevorzugte Option

Email

Telefon
Einreichen

Wir haben eine Schaltfläche initiiert und ihm ein Onclick -Ereignis gegeben, sodass der Benutzer, wenn der Benutzer auf die klickt einreichen Die Taste beginnt mit der Funktion HandleClick () auszuführen. Am Ende haben wir auf unseren JavaScript -Dateinamen mit Hilfe von verwiesen Skript Tag und verwenden die src Das Attribut hat den Dateinamen übergeben, der ist Code.JS.

JavaScript

Nachdem wir zwei Optionsfelder in HTML definiert haben, machen wir den nächsten Schritt, um Eingaben aus dem Optionsfeld zu erhalten. Zu diesem Zweck verwenden wir querySelectorAll (), mit denen alle Optionsfelder mit dem Namenskontakt ausgewählt werden können.

functionHandleclick ()
Constradiobuttons = Dokument.querySelectorAll ('input [name = "contact"]');
letselectedValue;
für (Constbofradiobuttons)
if (rb.geprüft)
selectedValue = rb.Wert;
brechen;


if (selectedValue)
alarm (selectedValue);

anders
ALERT ("Bitte eine Option auswählen");

Im obigen JavaScript wird die Funktion HandleClick () zu Beginn erstellt, die aus der HTML aufgerufen wird einreichen Taste. Danach die Verwendung der querySelectorAll ("input [name =" contact ”]”)) Wir wählen alle Optionsfelder, die den Namen des Namens haben Kontakt und speichern Sie die Referenz aller Optionsfelder in der Variablen Radio Knöpfe. Danach haben wir eine Schleife erstellt, die jedes Optionsschalter durchträgt, und prüft, ob ein Optionsfeld überprüft wird oder nicht, was bedeutet, dass das Optionsschalter ausgewählt ist oder nicht. Wenn ein Optionsfeld ausgewählt ist, speichert es den Wert dieses Optionsfelds in der SelectedValue Variable.

Sobald die Schleife endet, vereinen wir die Anweisung if/sonst, die überprüft, ob der ausgewählte Variable -Wert leer ist oder nicht. Wenn es einen Wert hat, wird dieser Wert alarmiert, sonst eine Warnung von Bitte wähle eine Option wird dem Benutzer angezeigt.

Wir können in der obigen Ausgabe sehen, dass die Warnung die Nachricht zeigte, dass die Benachrichtigung die Nachricht zeigte Bitte wähle eine Option. Wenn wir jedoch die auswählen Email Das Optionsfeld "Das Optionsfeld" sehen wir den Wert von E -Mails und wenn wir die auswählen Telefon Optionsknopf dann sehen wir den Wert des Telefons.

Abschluss

Um eine Gruppe verwandter Optionen einzurichten und nur eine zu einem bestimmten Zeitpunkt auszuwählen, werden Optionsfelder verwendet. Optionsschaltflächen werden mit initiiert mit <Eingabe> Elemente von HTML und der überprüft Eigenschaft wird in JavaScript verwendet, um festzustellen, ob ein Optionsfeld ausgewählt wurde oder nicht. Optionsschaltflächen sind sehr praktisch, wenn mehrere Optionen verfügbar sind, und der Entwickler möchte, dass der Benutzer nur einen auswählt. In diesem Beitrag lernen wir, wie Sie Eingaben mit Optionsfeldern in JavaScript aufnehmen können.