Un pulsante di opzione è un'icona utilizzata nei moduli per ricevere input dall'utente. Consente agli utenti di scegliere un valore dal gruppo di pulsanti di opzione. I pulsanti di opzione sono fondamentalmente utilizzati per i file selezione singola tra più selezioni , che viene utilizzato principalmente nei moduli GUI.
È possibile contrassegnare/selezionare un solo pulsante di opzione tra due o più pulsanti di opzione. In questo capitolo ti guideremo su come controllare un pulsante di opzione utilizzando il Linguaggio di programmazione JavaScript .
Per questo, per prima cosa progettiamo un modulo contenente radio pulsanti utilizzando HTML, quindi utilizzeremo la programmazione JavaScript per controllare il pulsante di opzione. Verificheremo anche quale valore del pulsante di opzione è selezionato.
Crea un pulsante di opzione
Di seguito è riportato un semplice codice per creare un gruppo di pulsanti di opzione.
Copia codice
quante settimane al mese
Scegli la tua stagione preferita:
EstateInverno
Piovoso
Autunno
Provalo adesso
Seleziona un pulsante di opzione
Non è necessario scrivere alcun codice specifico per controllare il pulsante di opzione. Possono essere controllati una volta creati o specificati nel modulo HTML.
Dobbiamo però scrivere il codice JavaScript per ottenere il valore del pulsante di opzione selezionato, che vedremo nel capitolo seguente:
Verificare che il pulsante di opzione sia selezionato o meno
In JavaScript esistono due modi per controllare il pulsante di opzione contrassegnato o per identificare quale pulsante di opzione è selezionato. JavaScript offre due metodi DOM per questo.
La proprietà della radio di ingresso selezionata viene utilizzata per verificare se la casella di controllo è selezionata o meno. Utilizzo document.getElementById('id').checked metodo per questo. Restituirà lo stato selezionato del pulsante di opzione come valore booleano. Può essere vero o falso.
VERO - Se è selezionato il pulsante di opzione.
Falso - Se il pulsante di opzione non è selezionato/selezionato.
Vedi il codice JavaScript qui sotto per sapere come funziona:
Esempio
Ad esempio, abbiamo un pulsante di opzione denominato Summer e id = 'summer'. Ora controlleremo utilizzando questo ID pulsante che il pulsante di opzione sia contrassegnato o meno.
Copia codice
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
La funzione querySelector() è un metodo DOM di JavaScript. Utilizza la proprietà del nome comune dei pulsanti di opzione al suo interno. Questo metodo viene utilizzato come indicato di seguito per verificare quale pulsante di opzione è selezionato.
vlc per scaricare youtube
document.querySelector('input[name='JTP']:checked')
Esempio
Ad esempio, abbiamo un gruppo di pulsanti di opzione con la proprietà name name = 'season' per tutti i pulsanti. Ora, tra questi pulsanti denominati stagione controlleremo quale è selezionato.
Copia codice
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Ottieni il valore del pulsante di opzione selezionato:
Utilizzando getElementById ()
Di seguito è riportato il codice per ottenere il valore del pulsante di opzione selezionato utilizzando il metodo getElementById():
Copia codice
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Utilizzando querySelector()
Di seguito è riportato il codice per ottenere il valore del pulsante di opzione selezionato utilizzando il metodo querySelector():
Copia codice
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Codice completo per ottenere il valore del pulsante di opzione selezionato
In questo esempio, metteremo insieme tutto il codice sopra per creare e controllare un pulsante di opzione. Successivamente recupereremo anche il valore del pulsante di opzione selezionato.
Copia codice
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Provalo adesso Produzione
Quando eseguirai il codice sopra, verrà eseguito sul Web e fornirà l'output come indicato di seguito:
Scegli uno dei pulsanti di opzione e fai clic su Invia pulsante e ottenere il valore selezionato.
Nel caso in cui non scegli nessuna delle stagioni e fai clic direttamente su Invia pulsante, ti mostrerà un messaggio di errore che - Non hai selezionato nessuna stagione perché abbiamo utilizzato la validazione.
Ottieni il valore del pulsante di opzione selezionato: querySelector()
Metodo DOM querySelector()
La funzione querySelector() è un metodo DOM di JavaScript. Questo metodo viene utilizzato per ottenere l'elemento che corrisponde a quanto specificato Selettore CSS nel documento. Ricorda che devi specificare la proprietà name del pulsante di opzione nel codice HTML.
È usato come document.querySelector('input[nome='JTP']:controllato') dentro il scheda per verificare il valore del pulsante di opzione selezionato dal gruppo di pulsanti di opzione. Riduce al minimo la lunghezza del codice ottenendo il valore del pulsante di opzione selezionato utilizzando una piccola riga di codice.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Vedi il codice qui sotto come verrà utilizzato con il modulo HTML:
Copia codice
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Provalo adesso Produzione
Quando eseguirai il codice sopra, ti mostrerà l'output sul web come indicato di seguito. Da qui scegli la tua stagione preferita.
Quando scegli un valore tra il pulsante di opzione indicato e fai clic su Invia pulsante, otterrai il valore selezionato sul web.
Nel caso in cui fai clic su Invia pulsante senza scegliere nessuno dei pulsanti di opzione, ti verrà mostrato un messaggio di errore che: Non hai selezionato nessuna stagione .
dialetto ibernato
Quindi, qui puoi vederli entrambi getElementById('stagione').value E document.querySelector('input[nome='JTP']:controllato') lavorare lo stesso. Entrambi vengono utilizzati per trovare il valore del pulsante di opzione selezionato. Puoi usarne uno qualsiasi.
getElementById rispetto a querySelector
Entrambi i metodi DOM getElementByID() e querySelector() funzionano quasi allo stesso modo. Tuttavia, presentano anche alcune differenze come prestazioni, dimensione del codice, ecc. Vediamo alcune differenze tra loro:
Lunghezza del codice
Il codice scritto con getElementById è un po' più lungo di querySelector. Utilizzando il metodo getElementById, dobbiamo controllare individualmente ciascun pulsante di opzione quale è selezionato.
D'altro canto, se utilizzi il metodo DOM querySelector, devi solo inserire una singola riga di codice per controllare il pulsante di opzione contrassegnato e ottenere il suo valore. Quindi, la conclusione è che querySelector richiede meno codice.
Prestazione
Entrambe le funzioni forniscono buone prestazioni, ma tutto ciò che serve è sapere qual è la migliore. IL getElementById il metodo è molto più veloce del querySelector metodo. Anche il metodo querySelector è un po' complesso.
Valore utilizzato dai metodi DOM
Il metodo getElementById utilizza sempre un ID univoco di ciascun pulsante di opzione mentre controlla il pulsante contrassegnato e restituisce il primo elemento corrispondente all'ID.
Mentre querySelector utilizza un common nome (selettore) per tutti i pulsanti di opzione per ottenere il pulsante di opzione contrassegnato e restituisce il primo elemento che corrisponde al selettore specificato.