Jak uzyskać wartość wybranego przycisku opcji za pomocą JavaScript?

Przyciski radiowe są jednym z najważniejszych elementów HTML podczas próby zbudowania formy. Przyciski opcji oferują użytkownikowi niektóre opcje, z których może wybrać tylko jedną opcję.

Zwykle, gdy chcemy uzyskać wartość elementu ze strony internetowej HTML, po prostu używamy właściwości wartości tego elementu w JavaScript. Ale nie możemy tego zrobić z przyciskami opcji. Powodem jest to, że nie jest dobrą praktyką, aby pobierać wartości poszczególnych przycisków radiowych. Dlatego chcemy tylko jednej wartości i to jest wybranego przycisku radiowego

Proces pobierania wartości wybranego przycisku opcji zawiera następujące kroki:

• Po pierwsze: uzyskaj odniesienie do grupy przycisków opcji w JavaScript
• Po drugie: z listy przycisków opcji filtruj ten za pomocą „sprawdzony" nieruchomość
• Po trzecie: Uzyskaj atrybut wartości filtrowanego przycisku opcji

Utwórzmy przykład, aby zaprezentować te kroki.

Krok 1: Skonfiguruj stronę internetową HTML

Utwórz stronę HTML z następującymi wierszami w niej:

Czego chciałbyś się nauczyć?

Gitara

Skrzypce

Cajon

Uczyć się

Następujące rzeczy dzieją się w kodzie wspomnianym powyżej:

• Tworzymy pojemnik, w którym umieścimy nasze przyciski opcji i przycisk „Ucz się”
• Wtedy pytamy użytkownika o instrument, którego chce się nauczyć
• Wybory są podane w postaci przycisków opcji
• Każdy przycisk opcji ma swój własny unikalny ID I wartość ale to samo nazwa grupować je
• Następnie Tag jest dodawany dla każdego przycisku radiowego
• Na stronie internetowej dodano przycisk, aby przesłać wybór użytkownika.

Uprzepustuj stronę internetową HTML, a otrzymasz to wyjście w przeglądarce.

Mamy przyciski radiowe i nasz przycisk nauki na środku strony internetowej.

Krok 2: Napisz kod JavaScript, aby wyświetlić wybór użytkownika

Chcemy wykonać funkcję w pliku skryptu po kliknięciu „Uczyć się" przycisk. Dlatego dodajemy następujące wiersze:

dokument.getElementById („Learn”).onClick = function ()
// następny kod w niej pojawiłby się
;

Wewnątrz tej funkcji uzyskaj odniesienie DOM naszej grupy przycisków opcji za pomocą następującej wiersza

var radiobuttongroup = dokument.getElementsByName („instrument”);

Następnie odfiltruj tę grupę przycisków opcji, aby znaleźć tę, która jest sprawdzana i przechowuje go w innej zmiennej za pomocą następującej linii

var checkedRadio = tablica.z (RadiobutTongRoup).Znajdź ((radio) => radio.sprawdzony);

Wreszcie, skłonić użytkownika do instrumentu, którego chce nauczyć się za pomocą funkcji alertu

Alert („Wybrałeś:” + CheckedRadio.wartość);

Pełny plik skryptu wygląda tak

dokument.getElementById („Learn”).onClick = function ()
var radiobuttongroup = dokument.getElementsByName („instrument”);
var checkedRadio = tablica.z (RadiobutTongRoup).znajdować(
(Radio) => Radio.sprawdzony
);
Alert („Wybrałeś:” + CheckedRadio.wartość);
;

Krok 3: Testowanie skryptu

Odśwież stronę internetową, wybierz przycisk opcji, a następnie kliknij przycisk, który mówi „Uczyć się". Powinieneś uzyskać następujące dane wyjściowe:

Z powodzeniem uzyskałeś wartość z zaznaczonego przycisku opcji i zaalarmowałeś użytkownika o jego wyborze.

Zakończyć

Aby uzyskać wartość wybranego przycisku opcji w JavaScript, musimy wykonać zestaw kroków. Pierwszym krokiem jest uzyskanie odniesienia JavaScript do przycisków radiowych o tej samej nazwie. Następnie chcemy odfiltrować przycisk opcji, który ma oznaczoną właściwość sprawdzoną. Następnie użyj przycisku opcji sklepu, aby uzyskać wartość za pomocą atrybutu wartości elementu HTML. Następnie możesz pracować z pobieraną wartością.