Ein Optionsfeld ist ein Symbol, das in Formularen verwendet wird, um Eingaben vom Benutzer entgegenzunehmen. Es ermöglicht den Benutzern, einen Wert aus der Gruppe von Optionsfeldern auszuwählen. Grundsätzlich werden dafür Optionsfelder verwendet Einzelauswahl aus mehreren , das hauptsächlich in GUI-Formularen verwendet wird.
Sie können zwischen zwei oder mehr Optionsfeldern nur ein Optionsfeld markieren/ankreuzen. In diesem Kapitel zeigen wir Ihnen, wie Sie ein Optionsfeld mithilfe von aktivieren JavaScript-Programmiersprache .
Dazu entwerfen wir zunächst ein Formular, das Radio enthält Tasten mit HTML und dann verwenden wir JavaScript-Programmierung, um das Optionsfeld zu überprüfen. Wir prüfen auch, welcher Optionsfeldwert ausgewählt ist.
Erstellen Sie ein Optionsfeld
Im Folgenden finden Sie einen einfachen Code zum Erstellen einer Gruppe von Optionsfeldern.
Code kopieren
Beispiel-Java-Code
Wählen Sie Ihre Lieblingsjahreszeit:
SommerWinter
Regnerisch
Herbst
Testen Sie es jetzt
Aktivieren Sie ein Optionsfeld
Wir müssen keinen speziellen Code schreiben, um das Optionsfeld zu überprüfen. Sie können überprüft werden, sobald sie im HTML-Format erstellt oder angegeben wurden.
Allerdings müssen wir den JavaScript-Code schreiben, um den Wert des aktivierten Optionsfelds zu erhalten, was wir im folgenden Kapitel sehen werden:
Überprüfen Sie, ob das Optionsfeld ausgewählt ist oder nicht
In JavaScript gibt es zwei Möglichkeiten, das markierte Optionsfeld zu überprüfen oder festzustellen, welches Optionsfeld ausgewählt ist. JavaScript bietet hierfür zwei DOM-Methoden an.
Mit der Eigenschaft „Eingaberadio überprüft“ wird überprüft, ob das Kontrollkästchen aktiviert ist oder nicht. Verwenden document.getElementById('id').checked Methode hierfür. Der aktivierte Status des Optionsfelds wird als boolescher Wert zurückgegeben. Es kann entweder wahr oder falsch sein.
WAHR - Wenn das Optionsfeld ausgewählt ist.
FALSCH - Wenn die Optionsschaltfläche nicht ausgewählt/markiert ist.
Sehen Sie sich den folgenden JavaScript-Code an, um zu erfahren, wie es funktioniert:
Beispiel
Zum Beispiel haben wir ein Optionsfeld mit dem Namen „Sommer“ und der ID = „Sommer“. Jetzt prüfen wir anhand dieser Schaltflächen-ID, ob das Optionsfeld markiert ist oder nicht.
Code kopieren
Ubuntu Build unerlässlich
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
Die Funktion querySelector() ist eine DOM-Methode von JavaScript. Es verwendet die allgemeine Namenseigenschaft der darin enthaltenen Optionsfelder. Diese Methode wird wie unten beschrieben verwendet, um zu überprüfen, welches Optionsfeld ausgewählt ist.
document.querySelector('input[name='JTP']:checked')
Beispiel
Wir haben zum Beispiel eine Gruppe von Optionsfeldern mit der Namenseigenschaft name = 'season' für alle Schaltflächen. Nun prüfen wir zwischen diesen Schaltflächen mit dem Namen „Saison“, welche ausgewählt ist.
Code kopieren
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Ermitteln Sie den Wert des aktivierten Optionsfelds:
Verwendung von getElementById ()
Im Folgenden finden Sie den Code zum Abrufen des Werts eines aktivierten Optionsfelds mithilfe der Methode getElementById():
Code kopieren
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Verwenden von querySelector()
Im Folgenden finden Sie den Code zum Abrufen des Werts eines aktivierten Optionsfelds mithilfe der Methode querySelector():
Code kopieren
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Vollständiger Code zum Abrufen des ausgewählten Optionsfeldwerts
In diesem Beispiel fügen wir den gesamten oben genannten Code zusammen, um ein Optionsfeld zu erstellen und zu überprüfen. Danach rufen wir auch den Wert des ausgewählten Optionsfelds ab.
Code kopieren
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Testen Sie es jetzt Ausgabe
Wenn Sie den obigen Code ausführen, wird er im Web ausgeführt und liefert die folgende Ausgabe:
Wählen Sie eines der Optionsfelder und klicken Sie darauf Einreichen Klicken Sie auf die Schaltfläche und erhalten Sie den ausgewählten Wert.
Falls Sie keine der Jahreszeiten auswählen und direkt darauf klicken Einreichen Klicken Sie auf die Schaltfläche, es wird Ihnen eine Fehlermeldung angezeigt, dass - Sie haben keine Saison ausgewählt weil wir die Validierung verwendet haben.
Den Wert des ausgewählten Optionsfelds abrufen: querySelector()
DOM querySelector()-Methode
Die Funktion querySelector() ist eine DOM-Methode von JavaScript. Diese Methode wird verwendet, um das Element abzurufen, das mit dem angegebenen übereinstimmt CSS-Selektor im Dokument. Denken Sie daran, dass Sie die Namenseigenschaft des Optionsfelds im HTML-Code angeben müssen.
Es wird verwendet als document.querySelector('input[name='JTP']:checked') im Inneren Klicken Sie auf die Registerkarte, um den ausgewählten Optionsfeldwert aus der Gruppe von Optionsfeldern zu überprüfen. Es minimiert die Länge des Codes, indem der Wert des ausgewählten Optionsfelds mithilfe einer kleinen Codezeile ermittelt wird.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Sehen Sie sich den Code unten an, wie er mit HTML-Formularen verwendet wird:
wie man einen String in eine Ganzzahl umwandelt
Code kopieren
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Testen Sie es jetzt Ausgabe
Wenn Sie den obigen Code ausführen, wird Ihnen die unten angegebene Ausgabe im Web angezeigt. Wählen Sie hier Ihre Lieblingsjahreszeit.
Wenn Sie einen Wert zwischen dem angegebenen Optionsfeld auswählen und auf klicken Einreichen Klicken Sie auf die Schaltfläche, um den ausgewählten Wert im Web anzuzeigen.
Falls Sie auf klicken Einreichen Klicken Sie auf die Schaltfläche, ohne eine der Optionsschaltflächen auszuwählen, wird eine Fehlermeldung angezeigt, die besagt: Sie haben keine Saison ausgewählt .
Hier können Sie also beides sehen getElementById('season').value Und document.querySelector('input[name='JTP']:checked') funktionieren gleich. Beide werden verwendet, um den Wert des aktivierten Optionsfelds zu finden. Sie können jedes davon verwenden.
getElementById vs. querySelector
Die beiden DOM-Methoden getElementByID() und querySelector() funktionieren nahezu gleich. Sie weisen jedoch auch einige Unterschiede auf, z. B. in Bezug auf Leistung und Codegröße usw. Sehen wir uns einige Unterschiede zwischen ihnen an:
Länge des Codes
Der mit getElementById geschriebene Code ist etwas länger als der querySelector. Mit der getElementById-Methode müssen wir jedes Optionsfeld einzeln prüfen, welches aktiviert ist.
Wenn Sie hingegen die DOM-Methode querySelector verwenden, müssen Sie nur eine einzige Codezeile einfügen, um das markierte Optionsfeld zu überprüfen und seinen Wert zu erhalten. Die Schlussfolgerung ist also, dass querySelector weniger Code benötigt.
Leistung
Beide Funktionen bieten eine gute Leistung, aber Sie müssen nur wissen, welche besser ist. Der getElementById Methode ist viel schneller als die querySelector Methode. Auch die querySelector-Methode ist etwas komplex.
Von DOM-Methoden verwendeter Wert
Die getElementById-Methode verwendet beim Überprüfen der markierten Schaltfläche immer eine eindeutige ID jedes Optionsfelds und gibt das erste Element zurück, das mit der ID übereinstimmt.
Während querySelector ein gemeinsames verwendet Name (Selektor) für alle Optionsfelder, um das markierte Optionsfeld abzurufen und das erste Element zurückzugeben, das mit dem angegebenen Selektor übereinstimmt.