Come ottenere il valore della casella di controllo in JavaScript

In JavaScript, ottenere un valore di controllo porta facilmente per l'utente quando si conferma le opzioni selezionate. Inoltre, nel caso di inviare un modulo importante, ottenere un valore di controllo che aiuta a inserire informazioni accurate. Inoltre, selezionare più opzioni per una risposta in un quiz o in un questionario e ottenere il valore della casella di controllo aiuta a trovare la soluzione corretta.

Questo articolo ti guiderà per ottenere/recuperare i valori di controllo in JavaScript.

Come ottenere/recuperare il valore di controllo in javascript?

Per ottenere il valore della casella di controllo in JavaScript, puoi usare:

• • "documento.QuerySelectorAll ()" metodo
  • "documento.getelementbyid" metodo

Ora passeremo attraverso ciascuno dei metodi uno per uno!

Metodo 1: Ottieni il valore della casella di controllo in JavaScript utilizzando il documento.Metodo QuerySelectorall ()

IL "documento.QuerySelectorAll ()"Il metodo restituisce tutti gli elementi che corrispondono a un selettore CSS. È inoltre possibile utilizzare questo metodo per selezionare i valori della casella di controllo specificati.

Sintassi

documento.QuerySelectorAll (selettori CSS)

Qui, "Selettori CSS"Fare riferimento al nome delle caselle di controllo definito nel file HTML.

Passare attraverso il seguente esempio per la dimostrazione:

Esempio

Nel primo passaggio, assegneremo un "Etichetta per"Attributo che specifica un'etichetta per un elemento HTML input di una forma. Successivamente, aggiungeremo il tipo di input "Casella di controllo"Per l'utilizzo della casella di controllo come input. Ora assegneremo "nome","valore", E "id"Per ogni casella di controllo. Infine, includeremo anche un pulsante per ottenere il valore della casella di controllo. Questi processi verranno ripetuti per ciascuna delle tre caselle di controllo:

Seleziona la tua lingua preferita

Pitone
Giava
JavaScript

Ottieni soggetto selezionato

Nel passaggio successivo, prenderemo il pulsante "id"Usando"documento.QuerySelector ()Metodo "e aggiungere il"clic"Evento al pulsante. Successivamente, includi il “documento.QuerySelectorAll ()"Metodo all'interno dell'evento clicca per selezionare i valori delle caselle di controllo specificate. Infine, applica il "spingere()"Metodo per visualizzare il valore di ciascuna casella di controllo selezionata utilizzando"documento.scrivere()" metodo:

L'output dell'implementazione di cui sopra comporterà:

Metodo 2: Ottieni il valore della casella di controllo in JavaScript utilizzando il documento.metodo getElementById ()

IL "documento.getElementById ()"Il metodo restituisce un elemento con un valore o un ID specificato. Può anche essere usato per recuperare la casella di controllo "id"E restituire il valore di ciascuna casella di controllo selezionata.

Sintassi

documento.getElementByID (elementID)

Qui, il "Elementid" si riferisce al valore ID di un elemento il cui valore selezionato verrà recuperato.

Passiamo attraverso il seguente esempio per la dimostrazione.

Esempio

In primo luogo, specificheremo il tipo di input su "Casella di controllo"E assegnare il"id","classe", E "valore"A ciascuna casella di controllo come discusso nel metodo precedente. Conterremo queste funzionalità in un tag denominato dati della tabella "". Allo stesso modo, includeremo un pulsante con un "al clic"Evento che accede alla funzione"getCheckBoxValue ()":

Seleziona la tua lingua preferita

Pitone:
Giava:
JavaScript:
Invia

Ora dichiareremo una funzione chiamata "getCheckBoxValue ()"Per recuperare l'ID di ogni casella di controllo utilizzando"documento.getElementById ()" metodo. Successivamente, creeremo una variabile "risultato", In cui verrà memorizzato il valore risultante della casella di controllo selezionata.

Infine, aggiungeremo condizioni diverse per ogni casella di controllo utilizzando "se altro"Dichiarazioni. Queste dichiarazioni funzionano in modo tale che se una casella di controllo specifica è selezionata o contrassegnata come verificata, il documento.Il metodo getElementById () accederà al suo ID e verrà visualizzato il valore corrispondente contro quel particolare ID. Infine, visualizza il contenuto del valore della casella di controllo Store:

L'output dell'implementazione di cui sopra comporterà:

Abbiamo fornito tutti i metodi più semplici per ottenere i valori della casella di controllo in JavaScript.

Conclusione

Per ottenere il valore della casella di controllo in JavaScript, è possibile utilizzare "documento.QuerySelectorAll ()"Metodo per selezionare le caselle di controllo specificate o"documento.getelementbyidMetodo "per ottenere il"id"Contro ciascuna delle caselle di controllo selezionate e visualizzare il valore corrispondente. Questo articolo ha spiegato i metodi per ottenere i valori della casella di controllo in JavaScript.