Come ottenere il valore del pulsante di opzione selezionato utilizzando JavaScript?

I pulsanti radio sono uno degli elementi più cruciali di HTML quando si tenta di costruire una forma. I pulsanti di opzione offrono all'utente alcune opzioni da cui può scegliere solo una singola opzione.

Normalmente, quando vogliamo ottenere il valore di un elemento da una pagina Web HTML, utilizziamo semplicemente la proprietà del valore di quell'elemento in JavaScript. Ma non possiamo farlo con i pulsanti di radio. Il motivo è che non è una buona pratica prendere i valori dei singoli pulsanti di radio. Pertanto, vogliamo solo un valore e questo è del pulsante di opzione selezionato

Il processo di recupero del valore di un pulsante di opzione selezionato include i seguenti passaggi:

• Primo: ottenere un riferimento al gruppo di pulsanti di radio in JavaScript
• Secondo: dall'elenco dei pulsanti di radio, filtra quello con "controllato" proprietà
• Terzo: Ottieni l'attributo Valore del pulsante di opzione filtrato

Creiamo un esempio per mostrare questi passaggi.

Passaggio 1: imposta una pagina web HTML

Crea una pagina web HTML con le seguenti righe al suo interno:

Cosa vorresti imparare?

Chitarra

Violino

Cajon

Imparare

Le seguenti cose stanno accadendo nel codice sopra menzionato:

• Stiamo creando un contenitore in cui metteremo i nostri pulsanti di opzione e il pulsante "Impara"
• Quindi chiediamo all'utente lo strumento che vuole imparare
• Le scelte sono riportate sotto forma di pulsanti di opzione
• Ogni pulsante di opzione ha il suo unico id E valore ma lo stesso nome per raggrupparli
• Poi un Il tag viene aggiunto per ogni pulsante di opzione
• È stato aggiunto un pulsante nella pagina Web, per l'invio della scelta dell'utente.

Accendi la pagina web HTML e otterrai questo output sul browser.

Abbiamo pulsanti di radio e il nostro pulsante di apprendimento nel mezzo della pagina web.

Passaggio 2: scrivi il codice JavaScript per visualizzare la scelta dell'utente

Vogliamo eseguire una funzione nel file di script facendo clic su "Imparare"Pulsante. Pertanto, aggiungiamo le seguenti righe:

documento.getElementById ("Learn").onClick = function ()
// Il prossimo codice sarebbe entrato dentro di lei
;

All'interno di questa funzione, ottenere il riferimento DOM del nostro gruppo di pulsanti di radio utilizzando la riga seguente

var radiobuttongroup = documento.getElementsByName ("Strumento");

Successivamente, filtra questo gruppo di pulsanti di radio per trovare quello che viene controllato e memorizzarlo all'interno di un'altra variabile usando la riga seguente

var checkEdEdradio = array.da (radiobuttongroup).find ((radio) => radio.controllato);

Infine, spingi l'utente sullo strumento che vuole imparare usando la funzione di avviso

Avviso ("Hai selezionato:" + CheckEdradio.valore);

Il file di script completo sembra questo

documento.getElementById ("Learn").onClick = function ()
var radiobuttongroup = documento.getElementsByName ("Strumento");
var checkEdEdradio = array.da (radiobuttongroup).Trovare(
(radio) => radio.controllato
);
Avviso ("Hai selezionato:" + CheckEdradio.valore);
;

Passaggio 3: testare lo script

Aggiorna la pagina Web, selezionare un pulsante di opzione e quindi fare clic sul pulsante che dice "Imparare". Dovresti ottenere il seguente output:

Hai preso con successo il valore da un pulsante di opzione selezionato e hai avvisato l'utente della sua scelta.

Incartare

Per ottenere il valore di un pulsante di opzione selezionato in JavaScript, dobbiamo seguire una serie di passaggi. Il primo passo è ottenere un riferimento JavaScript ai pulsanti di radio con lo stesso nome. Successivamente, vogliamo filtrare il pulsante di opzione con la proprietà segnalata. Successivamente, utilizzare il pulsante Store Radio per ottenere il valore utilizzando l'attributo del valore dell'elemento HTML. Quindi puoi lavorare con il valore recuperato.