Come verificare se la casella di controllo viene verificata utilizzando JavaScript

La casella di controllo è un tipo di input HTML che funge da casella di selezione. È utilizzato per la selezione o la deselezione di una certa opzione. Le caselle di controllo sono spesso utilizzate per consentire ai visitatori di interagire con le pagine Web e spesso pubblicare dati in un back -end controllando la casella che si applica a una determinata condizione.

Questo manuale dimostrerà la tecnica per verificare se la casella di controllo è controllata o meno.

Come verificare se la casella di controllo viene verificata utilizzando JavaScript?

Per determinare se la casella di controllo è controllata, utilizzare il “controllato" proprietà. Come sappiamo, ogni elemento contiene alcune caratteristiche che consentono a JavaScript di controllarlo in determinati modi e la proprietà a checkboid della casella di controllo è una di queste. La proprietà controllata fornisce il valore booleano vero o falso quando viene selezionata una casella di controllo.

Esempio 1: Utilizzo dell'evento OnClick () per il controllo se viene verificata la casella di controllo
Prima creeremo una casella di controllo che allega il "al clic()"Evento che invocherà il definito dell'utente"boxchecked ()"Funzione per verificare se la casella di controllo è controllata o meno:

Controlla la casella per accettare termini e condizioni:

Accetto tutti i termini e le condizioni.

Nel file JavaScript, definiremo una funzione denominata "boxchecked ()", Che per primo recuperà l'ID della casella di controllo utilizzando il"getElementById ()"Metodo e quindi applicare la proprietà controllata in modo tale che il valore restituito controllato sia impostato su"VERO"Se è contrassegnato come controllato. Quindi, verrà mostrato un avviso con il messaggio "La casella di controllo è controllata! Grazie per aver accettato:":

funzione boxchecked ()
Var CheckBox = Documento.getElementById ("Casella di controllo");
Se (casella di controllo.controllato == true)
Avviso ("La casella di controllo è controllata! Grazie per aver accettato:");

L'output corrispondente è mostrato di seguito:

Esempio 2: utilizzando il metodo addEventListener () per il controllo se viene verificata la casella di controllo
Qui creeremo una casella di controllo senza un evento onclick (). Quindi, aggiungeremo un paragrafo e il suo display è impostato come "nessuno"Fino a quando la casella di controllo non viene controllata. Nell'altro caso, quando la casella di controllo è contrassegnata come verificata, il suo testo aggiunto verrà visualizzato in colore verde:

Accetto tutti i termini e le condizioni.

CONTROLLATO!

Puoi anche verificare se la casella di controllo è controllata o meno senza utilizzare l'evento OnClick (). Qui useremo un altro metodo chiamato "addEventListener ()" con il "QuerySelector ()"Metodo utilizzando la proprietà selezionata della casella di controllo. Questo funzionerà in modo tale che il metodo QuerySelector () selezionerà prima il primo elemento abbinato all'ID aggiunto, quindi il metodo ADDEventListener () associerà il "clic"Evento con esso:

var text = documento.getElementById ("testo");
documento.QuerySelector ('#checkbox').addEventListener ('Click', (event) =>
if (evento.bersaglio.controllato)
testo.stile.display = "blocco";

)

Si può vedere che, quando la casella di controllo è contrassegnata, il contenuto aggiunto viene visualizzato in colore verde:

Tutto ciò che devi sapere su come determinare se una casella di controllo è contrassegnata o no è stata fornita.

Conclusione

Per determinare se la casella di controllo è selezionata, utilizzare la casella di controllo "controllato" proprietà. La proprietà controllata emette un valore booleano se è controllato; altro, dà falso. Per la verifica, è possibile utilizzare due procedure diverse; Uno è l'evento OnClick () e l'altro è il metodo AddeventListener (). In questo manuale, abbiamo descritto la procedura per verificare se la casella di controllo è controllata o meno utilizzando JavaScript.