Jak przyjmować wejście za pomocą przycisków opcji w JavaScript

JavaScript to język programowania, który daje naszym aplikacjom internetowym i stronom internetowym możliwość myślenia i działania, czyniąc je interaktywnymi. JavaScript oferuje nam przyciski radiowe używane do konfigurowania grupy powiązanych opcji z wybranym tylko jednym przyciskiem radiowym. Przyciski radiowe są najczęściej używane w formach i używane z elementem HTML. Przyciski radiowe są bardzo przydatne, gdy programista chce, aby użytkownik wybrał tylko jedną opcję z wielu opcji.

Na przykład aplikacja internetowa akceptuje numer e -mail lub numer telefonu i chcesz, aby użytkownik wybrał jeden, a nie jedno i drugie. Przyciski radiowe przydaje się do osiągnięcia tego zadania. Najpierw zdefiniujemy przyciski radiowe w HTML, a następnie przejdziemy do JavaScript, abyśmy mogli wziąć wejście za pomocą przycisków opcji.

Html

Wybierz swoją preferowaną opcję

E-mail

Telefon

W powyższym kodzie HTML użyliśmy dwóch przycisków opcji i podaliśmy nazwę kontaktu. Konieczne jest nadanie tej samej nazwy tej samej grupie przycisków radiowych, aby można było wybrać jednocześnie. Użyliśmy również etykiet do oznaczania naszych wejściowych przycisków opcji. W naszej przeglądarce zobaczymy następujące dane wyjściowe, kiedy uruchomimy powyższy kod:

Widzimy również, że tylko jeden przycisk opcji można wybrać w danym momencie. Przed przejściem w kierunku części JavaScript zainicjujmy również przesyłanie w HTML, abyśmy mogli później wysłuchać wydarzeń na tym przycisku.

Wybierz swoją preferowaną opcję

E-mail

Telefon
Składać

Zainicjowaliśmy przycisk i daliśmy mu zdarzenie OnClick, aby gdy użytkownik kliknął składać przycisk, funkcja HandleClick () rozpocznie się wykonywanie. Ostatecznie wspomnieliśmy o naszej nazwie JavaScript z pomocą scenariusz tag i używa src atrybut przekazał nazwę pliku kod.JS.

JavaScript

Teraz, gdy zdefiniowaliśmy dwa przyciski opcji w HTML, zróbmy następny krok w kierunku uzyskania wejścia z przycisku opcji, dlatego konieczne jest najpierw określić, który przycisk opcji jest aktywny lub wybrany. W tym celu użyjemy QuerySelelectorAll (), które wybierze wszystkie przyciski opcji z kontaktem z nazwą.

funkcjaHandleClick ()
Construadiobuttons = Document.querySelelectionAll ('input [name = "contact"]');
LetSelectedValue;
dla (constofradiobuttons)
if (rb.sprawdzony)
selectedValue = rb.wartość;
przerwa;


if (selectedValue)
alert (selectedValue);

w przeciwnym razie
alert („Wybierz opcję”);

W powyższym JavaScript funkcja Handleclick () jest tworzona na początku, która jest wywoływana z HTML składać przycisk. Po tym używa querySelelectionAll (”wejście [name =” contact ”]”) Wybieramy wszystkie przyciski opcji, które mają nazwę kontakt i zapisz odniesienie wszystkich przycisków radiowych w zmiennej przyciski radiowe. Po czym stworzyliśmy pętlę, która będzie iterowana przez każdy przycisk opcji i sprawdzi, czy jakikolwiek przycisk opcji jest sprawdzony, czy nie, co oznacza, że ​​przycisk opcji jest wybrany, czy nie. Jeśli wybrany zostanie przycisk opcji, będzie przechowywać wartość tego przycisku opcji w wybrana wartość zmienny.

Po zakończeniu pętli ujednolicmy instrukcję IF/Else, która sprawdza, czy wybrana wartość zmienna jest pusta, czy nie. Jeśli ma pewną wartość, ostrzega tę wartość, w przeciwnym razie ostrzeżenie Proszę wybrać opcję zostanie pokazany użytkownikowi.

W powyższym wyjściu widzimy, że kiedy nie wybraliśmy przycisku opcji, alert pokazał nam wiadomość Proszę wybrać opcję. Jednak kiedy wybieramy E-mail przycisk opcji, widzimy wartość wiadomości e -mail i kiedy wybieramy Telefon przycisk opcji, a następnie widzimy wartość telefonu.

Wniosek

Aby skonfigurować grupę powiązanych opcji i wybierając tylko jedną w jednym czasie, użyte są przyciski opcji. Przyciski radiowe są inicjowane z <wejście> elementy HTML i sprawdzony właściwość jest używana w JavaScript, aby sprawdzić, czy przycisk opcji został wybrany, czy nie. Przyciski radiowe są bardzo przydatne, gdy dostępnych jest wiele opcji, a programista chce, aby użytkownik wybrał tylko jeden. W tym poście uczymy się, jak przyjmować dane wejściowe za pomocą przycisków opcji w JavaScript.