Jak sprawdzić, czy przycisk opcji jest wybierany z JavaScript
Przyciski radiowe, niezbędna część formularzy HTML, pozwala użytkownikom wybrać jedną z wielu opcji. Można je stworzyć po prostu za pomocą Tag typu "radio". Przyciski radiowe są używane w grupie dwóch lub więcej przycisków o nazwie zwyczajowej. Ułatwia to przyciągnięcie ich do jednego obiektu i sprawdzenie ich statusu. Status przycisku opcji można sprawdzić za pomocą dwóch różnych metod, które zostaną omówione w tym zapisie.
Pierwszym etapem obu tych metod jest taki sam, jakim jest utworzenie formularza zawierającego przyciski radiowe:
Konfigurowanie formularza HTML
Po prostu utworzymy prosty formularz HTML z kilkoma przyciskami opcji:
Wybierz swój ulubiony kolor
W powyższym kodzie po raz pierwszy użyliśmy prostego
Tag, aby dać nagłówek, aby użytkownik mógł łatwo zrozumieć cel naszego formularza, który jest wyborem ulubionego koloru. Następnie użyliśmy tag, aby utworzyć formularz, w którym użyliśmy Tagi do utworzenia trzech przycisków opcji, które dają użytkownikom różne opcje.
Użyliśmy również tagi do etykietowania naszych przycisków opcji. Następnie użyliśmy kilku
tagi, aby dać sobie kilka przerw na linii, aby cała forma wyglądała ładnie i równomiernie rozmieszczona. Forma została zakończona tag, który można użyć do przesłania naszego formularza. woła CheckValue () funkcja, gdy zostanie kliknięta.
Teraz napiszemy kod JavaScript, aby zdefiniować CheckValue () funkcja, aby sprawdzić, który przycisk opcji został wybrany:
Metoda 1: Za pomocą getElementsByName ()
Możemy użyć .sprawdzony() właściwość, aby sprawdzić, czy przycisk opcji został wybrany, czy nie:
funkcja checkValue ()
var rados = dokument.getelementsByName („kolor”);
dla (Const Radio of Radious)
if (radio.sprawdzony)
Alert (radio.wartość + „to twój ulubiony kolor”);
przerwa;
W środku CheckValue () funkcja, którą najpierw zadeklarowaliśmy zmienną wymienioną radia który otrzymuje Nodelist ze wszystkich przycisków opcji o kolorze nazwy. Następnie iterujemy nad Nodelist i sprawdź status każdego przycisku radiowego. Jeśli wybrano przycisk radiowy alarm() metoda wyświetlania, który kolor został wybrany.
Kod dla całej strony internetowej:
Wybierz swój ulubiony kolor
Jeśli chcemy sprawdzić indywidualny przycisk opcji, możemy podać unikalny identyfikator, a następnie użyć getElementsById () metoda przechowywania w zmiennej. Następnie możemy użyć sprawdzony() właściwość, aby sprawdzić, czy przycisk został wybrany.
Metoda 2: Przy użyciu metody QuerySelelectorAll ()
QuerySelelection () Metoda przyjmuje selektor CSS jako argument i zwraca godelistę wszystkich elementów pasujących do danego selektora:
funkcja checkValue ()
var rados = dokument.querySelelectionAll ('input [name = "color"]');
dla (Const Radio of Radious)
if (radio.sprawdzony)
Alert (radio.wartość + „to twój ulubiony kolor”);
przerwa;
Definicja CheckValue () Funkcja jest prawie taka sama w obu metodach. Różnica polega na metodzie, która dostaje nodelistę przycisków opcji. Metoda 2 używa QuerySelelection () metoda zdobycia Nodelist.
Wybierz swój ulubiony kolor
Wniosek
Przyciski radiowe służą do uzyskania preferencji użytkownika z listy opcji. Grupy przycisków opcji można utworzyć, nadając tę samą wartość ich atrybutom nazwy. Tylko jeden przycisk opcji można wybrać jednocześnie. Ten post dotyczył tego, w jaki sposób możemy użyć JavaScript, aby sprawdzić, czy wybrany jest przycisk opcji.