So überprüfen Sie, ob ein Optionsfeld mit JavaScript ausgewählt wird
Optionsschaltflächen, ein wesentlicher Bestandteil von HTML. Sie können erstellt werden, indem einfach die verwendet werden Tag des Typs "Radio". Optionsschaltflächen werden in einer Gruppe von zwei oder mehr Tasten mit einem gebräuchlichen Namen verwendet. Dies erleichtert es, sie in ein einzelnes Objekt zu holen und ihren Status zu überprüfen. Der Status eines Optionsfelds kann durch die Verwendung von zwei verschiedenen Methoden überprüft werden, die in diesem Artikel erörtert werden.
Der erste Schritt dieser beiden Methoden besteht darin, ein Formular mit Optionsfeldern zu erstellen:
Einrichten eines HTML -Formulars
Wir erstellen einfach ein einfaches HTML -Formular mit ein paar Optionsfeldern:
Wählen Sie Ihre Lieblingsfarbe
Im obigen Code haben wir zuerst eine einfache verwendet
Tag, um eine Überschrift zu geben, damit der Benutzer den Zweck unserer Form leicht verstehen kann, eine Lieblingsfarbe zu wählen. Wir haben dann das benutzt Tag zum Erstellen eines Formulars, in dem wir verwendet haben Tags zum Erstellen von drei Optionsschaltflächen, die den Benutzern unterschiedliche Optionen geben.
Wir haben auch die benutzt Tags, um unsere Optionsfelder zu kennzeichnen. Wir haben dann ein paar benutzt
Tags, um uns ein paar Zeilenpausen zu geben, damit die ganze Form gut und gleichmäßig verteilt aussieht. Die Form wurde mit a beendet Tag, mit dem unser Formular eingereicht werden kann. Der ruft die checkValue () Funktion beim Klicken.
Jetzt schreiben wir den JavaScript -Code, um die zu definieren checkValue () Funktion zum Überprüfen, welches Optionsfeld ausgewählt wurde:
Methode 1: Verwenden des GetElementsByName ()
Wir können die verwenden .geprüft () Eigenschaft, um zu überprüfen, ob ein Optionsfeld ausgewählt wurde oder nicht:
Funktion checkValue ()
var Radios = Dokument.GetElementsByName ("Farbe");
für (const Radio von Radios)
if (Radio.geprüft)
Alarm (Radio.Wert + "ist deine Lieblingsfarbe");
brechen;
In der checkValue () Funktion Wir haben zuerst eine Variable benannt deklariert Funkgeräte das erhält a Nodelist von allen Optionsfeldern mit der Namensfarbe. Wir iterieren dann über die Nodelist und überprüfen Sie den Status jedes Optionsfelds. Wenn ein Optionsfeld ausgewählt wurde, verwenden wir die Alarm() Methode zur Anzeige, welche Farbe ausgewählt wurde.
Der Code für die gesamte Webseite:
Wählen Sie Ihre Lieblingsfarbe
Wenn wir nach einem individuellen Optionsfeld suchen möchten, können wir ihm eine eindeutige ID geben und dann die verwenden GetElementsbyId () Methode, um es in einer Variablen zu speichern. Wir können dann die verwenden geprüft () Eigenschaft, um zu überprüfen, ob die Taste ausgewählt wurde.
Methode 2: Verwendung der Methode querySelectorAll ()
Der QuerySelectorAll () Methode nimmt einen CSS -Selektor als Argument ein und gibt einen Nodelist aller Elemente zurück, die mit dem angegebenen Selektor übereinstimmen:
Funktion checkValue ()
var Radios = Dokument.querySelectorAll ('input [name = "color"]');
für (const Radio von Radios)
if (Radio.geprüft)
Alarm (Radio.Wert + "ist deine Lieblingsfarbe");
brechen;
Die Definition der checkValue () Die Funktion ist in beiden Methoden fast gleich. Der Unterschied besteht darin. Methode 2 verwendet die QuerySelectorAll () Methode, um den Nodelist zu erhalten.
Wählen Sie Ihre Lieblingsfarbe
Abschluss
Optionsschaltflächen werden verwendet, um die Präferenz des Benutzers aus einer Liste von Optionen zu erhalten. Gruppen von Optionsfeldern können gebildet werden, indem deren Namensattribute den gleichen Wert vergeben. Es können jeweils nur ein Optionsfeld ausgewählt werden. In diesem Beitrag ging es darum, wie wir JavaScript verwenden können, um zu überprüfen, ob ein Optionsfeld ausgewählt ist.