Modi diversi per ottenere valore dal pulsante di opzione in JavaScript

In JavaScript, di solito ci imbattiamo in pagine Web in cui è necessario ottenere il valore del pulsante di opzione per verificare se i dati inseriti sono corretti o no. Ad esempio, è necessario inviare un modulo e avvisare l'utente se i dati inseriti sono rilevanti. In tali casi, ottenere valore dal pulsante di opzione in JavaScript è una caratteristica molto utile per salvare il tempo dell'utente finale e garantire la sicurezza dei dati.

Modi diversi per ottenere valore dal pulsante di opzione in JavaScript

Per ottenere valore dal pulsante di opzione in JavaScript, è possibile utilizzare i seguenti metodi:

• "getElementById ()" E "getElementsByName ()"Metodi
• "Trovare()" metodo
• "controllato" proprietà

Ora passeremo attraverso ciascuna delle metodologie elencate una per una!

Metodo 1: ottieni valore dal pulsante di radio in JavaScript usando i metodi getElementById () e getElementsByName ()

IL "getElementById ()"Il metodo prende un elemento con un ID specificato e il"getElementsByName ()"Il metodo accede agli elementi con il nome specificato nel suo argomento. Questi metodi possono essere utilizzati per ottenere sia l'ID pulsante degli attributi che il valore del nome per accedere a loro e visualizzare i loro valori.

Sintassi

documento.getElementByID (elementID)

Qui, "Elementid"Si riferisce all'ID specificato dell'elemento aggiunto.

documento.getElementsByName (nome)

Nella sintassi sopra, "nome"È il valore del nome dell'elemento.

Il seguente esempio spiegherà chiaramente il concetto indicato.

Esempio

Nel seguente esempio, includeremo un'intestazione nel ""Tag con una pausa di riga come segue:

Seleziona uno:

Ora, assegna il tipo di input come "Radio"Il pulsante di opzione e specifica il suo ID, nome e valore:

Inoltre, includi un “etichetta"Per il tipo di input con un valore chiamato"E-mail":

E-mail

Allo stesso modo, ripeti i passaggi discussi per "Telefono n." campo:

Telefono n.

Successivamente, includi un pulsante chiamato "Invia"Per ottenere il valore facendo clic:

Invia

Ora, prendi il pulsante creato usando "documento.getElementById ()"Metodo nel file JavaScript. Inoltre, applica un “al clic"Evento per accedere a una funzione. Nella funzione definita di seguito, accedi a entrambi i tipi di input usando "documento.getElementsByName ()Metodo come il "nome"L'attributo in entrambi i tipi di input è lo stesso.

Infine, applica un “per"Loop e ottieni il valore del pulsante di opzione selezionato usando il"controllato"Proprietà e visualizzarla nella casella di allerta:

documento.getElementById ('Invia').onClick = function ()
var value = document.getElementsByName ('Contact');
per (var radio del valore)
Se (radio.controllato)
Avviso (radio.valore);

L'output del programma di cui sopra risulterà come segue:

Metodo 2: ottieni valore dal pulsante di radio in JavaScript usando il metodo find ()

IL "Trovare()"Il metodo accede al valore del primo elemento. Questo metodo può essere implementato per ottenere il valore del pulsante di opzione selezionato trovando gli attributi specifici con l'aiuto del nome aggiunto.

Sintassi

Vettore.da (valore).Trova (radio => radio.controllato)

Qui, "da()"Il metodo accederà all'elemento specificato,"Trovare()"Il metodo lo corrisponderà al valore del pulsante di opzione selezionato e il valore risultante verrà restituito.

Guarda il seguente esempio.

Esempio

Per HTML, useremo lo stesso codice indicato nel metodo precedente. Nel nostro file JavaScript, prenderemo l'ID pulsante usando "documento.getElementById ()Metodo "con un"al clic"Evento che accede alla funzione, che prima otterrà entrambi i tipi di input con lo stesso attributocontatto" usando il "documento.getElementsByName ()" metodo.

Infine, applica il “da()"Metodo per accedere al valore memorizzato nella variabile denominata"valore", e il "Trovare()"Il metodo otterrà lo stato controllato dell'input. Finalmente il "valore"La proprietà restituirà il valore del pulsante di opzione specifico contrassegnato come selezionato:

documento.getElementById ('Invia').onClick = function ()
var value = document.getElementsByName ("Contatto");
var selectValue = array.da (valore).Trova (radio => radio.controllato);
Avviso (SelectValue.valore);

Produzione

Metodo 3: ottenere valore dal pulsante di opzione in JavaScript utilizzando la proprietà Controllate ()

IL "controllato"La proprietà restituisce lo stato controllato del tipo di input specificato. Questo metodo può essere applicato per verificare la condizione selezionata per ciascuno dei pulsanti di opzione e restituire il valore corrispondente.

Sintassi

CheckBoxObject.controllato

Nella sintassi data, "CheckBoxObject"Si riferisce all'oggetto specificato da controllare.

Esempio

Innanzitutto, aggiungi un "etichetta"Usando""Tag per la specifica di una particolare categoria seguita da un'interruzione di riga in"
"Tag:

Seleziona uno:

Successivamente, ripeti le procedure discusse sopra per specificare due tipi di input come "Radio"E assegna i valori indicati seguiti da una rottura di riga mostrata di seguito:

Maschio
Femmina

Inoltre, includi un tipo di input chiamato "invia"Per ottenere il valore del pulsante di opzione facendo clic. UN "al clic"Verrà inoltre aggiunto l'evento per accedere alla funzione specificata facendo clic su Invia:

Dopodiché, dichiara una funzione chiamata "sottomissione ()"E ottieni gli elementi degli ID specificati e conservali nelle variabili denominate"Ottenere" E "get1". Infine, applica una condizione che se il pulsante di opzione si riferisce a "Maschio" O "Femmina"Il genere è accessibile, il"controllato"La proprietà lo controllerà e il"valore"La proprietà prenderà il valore corrispondente contro ciascuno dei pulsanti di opzione sezionati:

functionsubmitData ()
get = document.getElementById ("Genere")
get1 = documento.getElementById ("GenderFem")
Se (ottieni.controllato == true)
Avviso (documento.getElementById ("Genere").valore);

Elseif (get1.controllato == true)
Avviso (documento.getElementById ("GenderFem").valore);

Produzione

Abbiamo compilato diversi modi per ottenere valore da un pulsante di opzione in JavaScript.

Conclusione

Per ottenere valore dal pulsante di opzione in JavaScript, applica il “getElementById ()" E "getElementsByName ()"Metodi per accedere a entrambi gli attributi contemporaneamente e visualizzare i loro valori corrispondenti, o"Trovare()"Metodo per controllare i pulsanti di radio trovando gli attributi specificati in base ai loro nomi set o al"controllato"Metodo della proprietà per applicare una condizione per ciascuno degli attributi e ottenere il loro valore. Questo blog è guidato in relazione alla procedura per ottenere valore dal pulsante di opzione in JavaScript.