Przycisk opcji to ikona używana w formularzach do pobierania danych wejściowych od użytkownika. Pozwala użytkownikom wybrać jedną wartość z grupy przycisków radiowych. Przyciski radiowe są zasadniczo używane do pojedynczy wybór spośród wielu , który jest najczęściej używany w formularzach GUI.
Można zaznaczyć/zaznaczyć tylko jeden przycisk opcji pomiędzy dwoma lub większą liczbą przycisków opcji. W tym rozdziale poinstruujemy Cię, jak sprawdzić przycisk opcji za pomocą Język programowania JavaScript .
W tym celu najpierw projektujemy formularz zawierający radio guziki używając HTML , a następnie użyjemy programowania JavaScript, aby sprawdzić przycisk radiowy. Sprawdzimy również, która wartość przycisku opcji jest wybrana.
Utwórz przycisk radiowy
Poniżej znajduje się prosty kod umożliwiający utworzenie grupy przycisków opcji.
Skopiuj kod
np. klip
Wybierz swoją ulubioną porę roku:
LatoZima
Deszczowy
Jesień
Przetestuj teraz
Sprawdź przycisk radiowy
Aby sprawdzić przycisk radiowy, nie musimy pisać żadnego konkretnego kodu. Można je sprawdzić po ich utworzeniu lub określeniu w formularzu HTML.
Musimy jednak napisać kod JavaScript, aby uzyskać wartość zaznaczonego przycisku radiowego, co zobaczymy w poniższym rozdziale:
Sprawdź, czy przycisk radiowy jest wybrany, czy nie
W JavaScript istnieją dwa sposoby sprawdzenia zaznaczonego przycisku opcji lub zidentyfikowania, który przycisk opcji jest wybrany. JavaScript oferuje w tym celu dwie metody DOM.
Właściwość radio wejściowe sprawdzane służy do sprawdzania, czy pole wyboru jest zaznaczone, czy nie. Używać document.getElementById('id').zaznaczone na to metoda. Zwróci sprawdzony status przycisku opcji jako wartość logiczną. Może to być prawda lub fałsz.
PRAWDA - Jeśli wybrano przycisk radiowy.
FAŁSZ - Jeśli przycisk radiowy nie jest wybrany/zaznaczony.
Zobacz poniższy kod JavaScript, aby dowiedzieć się, jak to działa:
Przykład
Na przykład mamy przycisk opcji o nazwie Lato i id = „lato”. Teraz sprawdzimy za pomocą tego identyfikatora przycisku, czy przycisk opcji jest zaznaczony, czy nie.
Skopiuj kod
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } zapytanieSelector()
Funkcja querySelector() jest metodą DOM języka JavaScript. Używa właściwości nazwy zwyczajowej znajdujących się w nim przycisków opcji. Metodę tę stosuje się w sposób podany poniżej, aby sprawdzić, który przycisk opcji jest wybrany.
document.querySelector('input[name='JTP']:checked')
Przykład
Na przykład mamy grupę przycisków opcji o nazwie właściwość name = „sezon” dla wszystkich przycisków. Teraz pomiędzy tymi przyciskami o nazwie sezon sprawdzimy, który z nich jest wybrany.
Skopiuj kod
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Uzyskaj wartość zaznaczonego przycisku opcji:
Korzystanie z getElementById ()
Poniżej znajduje się kod pozwalający uzyskać wartość zaznaczonego przycisku opcji za pomocą metody getElementById():
Skopiuj kod
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Korzystanie z querySelector()
Poniżej znajduje się kod pozwalający uzyskać wartość zaznaczonego przycisku opcji za pomocą metody querySelector():
Skopiuj kod
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Pełny kod umożliwiający pobranie wybranej wartości przycisku radiowego
W tym przykładzie połączymy cały powyższy kod, aby utworzyć i sprawdzić przycisk opcji. Następnie pobierzemy także wartość wybranego przycisku radiowego.
Skopiuj kod
rzuć ciąg znaków na int java
<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'; } } Przetestuj teraz Wyjście
Gdy wykonasz powyższy kod, zostanie on uruchomiony w Internecie i wyświetli wynik podany poniżej:
Wybierz jeden z przycisków radiowych i kliknij Składać przycisk i uzyskaj wybraną wartość.
Jeżeli nie wybierzesz żadnej pory roku i bezpośrednio kliknij na Składać przycisk, wyświetli się komunikat o błędzie, który - Nie wybrałeś żadnego sezonu ponieważ skorzystaliśmy z walidacji.
Uzyskaj wartość wybranego przycisku opcji: querySelector()
Metoda zapytaniaSelector() DOM
Funkcja querySelector() jest metodą DOM języka JavaScript. Ta metoda służy do uzyskania elementu pasującego do określonego Selektor CSS w dokumencie. Pamiętaj, że musisz określić właściwość name przycisku radiowego w kodzie HTML.
Jest używany jako document.querySelector('input[name='JTP']:checked') w środku aby sprawdzić wybraną wartość przycisku radiowego z grupy przycisków radiowych. Minimalizuje długość kodu, pobierając wartość wybranego przycisku opcji za pomocą małej linii kodu.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Zobacz poniższy kod, jak będzie działał z formularzem HTML:
Skopiuj kod
<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'; } } Przetestuj teraz Wyjście
Kiedy wykonasz powyższy kod, wyświetli on dane wyjściowe w Internecie, jak podano poniżej. Stąd wybierz swoją ulubioną porę roku.
listonosz
Po wybraniu wartości pomiędzy danym przyciskiem opcji i kliknięciu przycisku Składać przycisk, otrzymasz wybraną wartość w Internecie.
W przypadku kliknięcia na Składać bez wybrania żadnego przycisku opcji, wyświetli się komunikat o błędzie, który: Nie wybrałeś żadnego sezonu .
Zatem tutaj widać jedno i drugie getElementById('sezon').wartość I document.querySelector('input[name='JTP']:checked') pracować tak samo. Obydwa służą do znalezienia zaznaczonej wartości przycisku opcji. Możesz użyć dowolnego z nich.
getElementById vs querySelector
Obie metody DOM getElementByID() i querySelector() działają prawie tak samo. Mają jednak kilka różnic, takich jak wydajność i rozmiar kodu itp. Zobaczmy między nimi pewną różnicę:
Długość kodu
Kod napisany za pomocą getElementById jest nieco dłuższy niż querySelector. Korzystając z metody getElementById, musimy sprawdzić każdy przycisk opcji indywidualnie, który z nich jest zaznaczony.
Z drugiej strony, jeśli używasz metody querySelector DOM, wystarczy umieścić jedną linię kodu, aby sprawdzić zaznaczony przycisk opcji i uzyskać jego wartość. Wniosek jest więc taki, że querySelector wymaga mniej kodu.
Wydajność
Obie funkcje zapewniają dobrą wydajność, ale wystarczy wiedzieć, która z nich jest lepsza. The pobierzElementById metoda jest znacznie szybsza niż selektor zapytania metoda. Metoda querySelector jest również nieco złożona.
Wartość używana przez metody DOM
Metoda getElementById zawsze używa unikalnego identyfikatora każdego przycisku opcji podczas sprawdzania zaznaczonego przycisku i zwraca pierwszy element zgodny z identyfikatorem.
Podczas gdy querySelector używa wspólnego nazwa (selektor) dla wszystkich przycisków opcji, aby uzyskać zaznaczony przycisk opcji i zwraca pierwszy element pasujący do określonego selektora.