Come verificare se un pulsante di opzione è selezionato con JavaScript
I pulsanti di radio, una parte essenziale dei moduli HTML, consentono agli utenti di selezionare una delle più opzioni. Possono essere creati semplicemente usando il tag di tipo "Radio". I pulsanti di opzione sono usati in un gruppo di due o più pulsanti con un nome comune. Questo rende più facile recuperarli in un singolo oggetto e verificare il loro stato. Lo stato di un pulsante di opzione può essere verificato utilizzando due metodi diversi che verranno discussi in questo articolo.
Il primo passo di entrambi questi metodi è lo stesso che è creare una forma contenente pulsanti:
Impostazione di un modulo HTML
Creeremo solo un semplice modulo HTML con alcuni pulsanti di opzione:
Scegli il tuo colore preferito
Nel codice sopra abbiamo usato per la prima volta un semplice
Tag per dare un titolo in modo che l'utente possa comprendere facilmente lo scopo della nostra forma che è scegliere un colore preferito. Abbiamo quindi usato il tagga per creare una forma, all'interno della quale abbiamo usato Tag per creare tre pulsanti di radio che offrano diverse opzioni agli utenti.
Abbiamo anche usato il Tag per etichettare i nostri pulsanti di opzione. Abbiamo quindi usato un paio di
tag per darci alcune pause di linea, quindi l'intera forma sembra bella e uniformemente distanziata. La forma si è conclusa con a tag che può essere utilizzato per inviare il nostro modulo. IL chiama il checkValue () funzione quando viene cliccata.
Ora scriveremo il codice JavaScript per definire il checkValue () funzione per verificare quale pulsante di opzione è stato selezionato:
Metodo 1: Utilizzo di getElementsByName ()
Possiamo usare il .controllato() Proprietà per verificare se un pulsante di opzione è stato selezionato o meno:
funzione checkValue ()
var radios = documento.getElementsByName ("Color");
per (const radio delle radio)
Se (radio.controllato)
Avviso (radio.valore + "è il tuo colore preferito");
rottura;
Dentro il checkValue () funzione abbiamo prima dichiarato una variabile denominata radio che riceve a nodelist di tutti i pulsanti di opzione con il colore del nome. Quindi iteamiamo sul nodelist e controlla lo stato di ciascun pulsante di opzione. Se è stato selezionato un pulsante di opzione, utilizziamo il mettere in guardia() Metodo da visualizzare quale colore è stato selezionato.
Il codice per l'intera pagina Web:
Scegli il tuo colore preferito
Se vogliamo verificare un singolo pulsante di opzione, possiamo dargli un ID univoco e quindi utilizzare il getElementsById () metodo per archiviarlo in una variabile. Possiamo quindi usare il controllato() Proprietà da verificare se il pulsante è stato scelto.
Metodo 2: utilizzando il metodo QuerySelectorall ()
IL QuerySelectorAll () Il metodo prende un selettore CSS come argomento e restituisce un nodery di tutti gli elementi che corrispondono al selettore dato:
funzione checkValue ()
var radios = documento.QuerySelectorAll ('input [name = "color"]');
per (const radio delle radio)
Se (radio.controllato)
Avviso (radio.valore + "è il tuo colore preferito");
rottura;
La definizione di checkValue () La funzione è quasi la stessa in entrambi i metodi. La differenza è del metodo che ottiene il nodelist dei pulsanti di radio. Il metodo 2 utilizza il QuerySelectorAll () metodo per ottenere il nodelist.
Scegli il tuo colore preferito
Conclusione
I pulsanti radio vengono utilizzati per ottenere le preferenze dell'utente da un elenco di opzioni. I gruppi di pulsanti radio possono essere formati dando lo stesso valore ai loro attributi di nome. È possibile selezionare un solo pulsante di opzione alla volta. Questo post riguardava il modo in cui possiamo usare JavaScript per verificare se viene selezionato un pulsante di opzione.