Come prendere input con i pulsanti di radio in JavaScript

JavaScript è un linguaggio di programmazione che offre alle nostre applicazioni Web e alle pagine Web la possibilità di pensare e agire rendendole interattive. JavaScript ci offre pulsanti di radio che vengono utilizzati per impostare un gruppo di opzioni correlate con un solo pulsante di opzione scelto alla volta. I pulsanti di radio sono utilizzati principalmente nelle forme e utilizzati con l'elemento di HTML. I pulsanti di radio sono molto utili quando lo sviluppatore vuole che l'utente seleziona solo un'opzione dalle più opzioni.

Ad esempio, l'applicazione Web accetta e -mail o numero di telefono e si desidera che l'utente ne selettui uno e non entrambi. I pulsanti di opzione sono utili per raggiungere questo compito. Innanzitutto, definiremo i pulsanti di radio in HTML e poi andremo verso JavaScript in modo da poter prendere input con i pulsanti di radio.

Html

Scegli la tua opzione preferita

E-mail

Telefono

Nel codice HTML sopra, abbiamo usato due pulsanti di radio e abbiamo dato il nome del contatto. È necessario dare lo stesso nome allo stesso gruppo di pulsanti di opzione in modo che solo uno possa essere selezionato contemporaneamente. Abbiamo anche usato etichette per etichettare i nostri pulsanti di radio input. Vedremo il seguente output nel nostro browser quando eseguiamo il codice sopra:

Possiamo anche vedere che un solo pulsante di opzione può essere selezionato in qualsiasi momento. Prima di andare verso la parte JavaScript, iniziamo anche un invio in HTML in modo da poter successivamente ascoltare gli eventi su questo pulsante.

Scegli la tua opzione preferita

E-mail

Telefono
Invia

Abbiamo avviato un pulsante e gli abbiamo dato un evento OnClick in modo che quando l'utente fa clic sul invia pulsante, la funzione HandleClick () inizierà a eseguire. Alla fine, abbiamo fatto riferimento al nostro nome file JavaScript con l'aiuto di sceneggiatura tagga e usando il src L'attributo ha superato il nome del file che è codice.js.

JavaScript

Ora che abbiamo definito due pulsanti di opzione in HTML, facciamo il passo successivo per ottenere l'input dal pulsante di opzione, quindi è necessario determinare prima quale pulsante di radio è attivo o selezionato. A tale scopo, utilizzeremo QuerySelectorAll () che selezionerà tutti i pulsanti di opzione con il contatto del nome.

functionHandleClick ()
RESTRADIOBUTTONS = Documento.QuerySelectorAll ('input [name = "contact"]');
LetSelectedValue;
per (borgbofradiobuttons)
if (Rb.controllato)
SelectedValue = Rb.valore;
rottura;


if (selectedValue)
Avviso (selezionatoValue);

altro
avviso ("Seleziona un'opzione");

Nella funzione JavaScript sopra, la funzione HandleClick () viene creata all'inizio che viene chiamato dall'HTML invia pulsante. Dopo questo, usando il QuerySelectorAll ("input [name =" contatto "]") Selezioniamo tutti i pulsanti di opzione che hanno il nome di contatto e salva il riferimento di tutti i pulsanti di opzione nella variabile tasti della radio. Dopodiché, abbiamo creato un ciclo che iterirà tramite ogni pulsante di opzione e verificherà se il pulsante di opzione è selezionato o meno, il che significa che il pulsante di opzione è selezionato o meno. Se viene selezionato un pulsante di opzione, archiverà il valore di quel pulsante di opzione in Valore selezionato variabile.

Una volta terminato il ciclo, unificiamo l'istruzione IF/Else che controlla se il valotto selezionato della variabile è vuoto o meno. Se ha un certo valore, avviserà quel valore, altrimenti un avviso di Per favore selezionate un'opzione verrà mostrato all'utente.

Possiamo vedere nell'output sopra che quando non abbiamo selezionato un pulsante di opzione, l'avviso ci ha mostrato il messaggio che Per favore selezionate un'opzione. Tuttavia, quando selezioniamo il E-mail Pulsante di opzione, vediamo il valore dell'e -mail e quando selezioniamo il Telefono pulsante di opzione quindi vediamo il valore del telefono.

Conclusione

Per impostare un gruppo di opzioni correlate e selezionarne solo una a un determinato momento, vengono utilizzati i pulsanti di opzione. I pulsanti di opzione sono iniziati con <Input> elementi di html e il controllato La proprietà viene utilizzata in JavaScript per vedere se è stato selezionato o meno un pulsante di opzione. I pulsanti di radio sono molto utili quando ci sono più opzioni disponibili e lo sviluppatore vuole che l'utente selezioni solo una. In questo post, impariamo a prendere input con i pulsanti di radio in JavaScript.