Come controllare/deselezionare la casella di controllo utilizzando JavaScript
Questo articolo descriverà la procedura per verificare e deselezionare la casella di controllo utilizzando JavaScript.
Come controllare/deselezionare la casella di controllo utilizzando JavaScript?
Per controllare o deselezionare le caselle di controllo in JavaScript, usa il “controllato"Attributo. Innanzitutto, ottieni il riferimento dell'elemento HTML "Casella di controllo"Con l'aiuto del suo assegnato"id" usando il "getElementById ()"Metodo, e poi applicare il"controllato"Proprietà sul suo valore.
Esempio 1: controlla/deseleziona la casella di controllo singola
Innanzitutto, crea un file HTML, con le seguenti righe di codice:
Fai clic sui pulsanti per controllare o deselezionare la casella di controllo
D'accordo con i termini e le condizioni
Nel codice sopra:
- Crea una casella di controllo, con l'ID "Casella di controllo"Che verrà utilizzato per accedere all'elemento"Casella di controllo"Per eseguire azioni.
- Crea due pulsanti, "SÌ" E "NO", Per verificare o deselezionare la casella di controllo che attiverà la funzione"controllo()" E "UnCheck ()"Rispettivamente sull'evento click.
Dopo aver eseguito il codice sopra, l'output sarà così:
Quindi, definire le funzioni per eseguire le azioni nella casella di controllo nel file JavaScript o nel tag. Per verificare la casella di controllo, utilizzare le righe del codice in basso:
funzione check ()Sia input = document.getElementById ('Checkbox');
ingresso.controllato = vero;
Nel codice sopra:
- Definire una funzione "controllo()"Ciò attiverà il pulsante Clicca per controllare la casella di controllo.
- All'interno del corpo della funzione, ottenere il riferimento della casella di controllo utilizzando il suo ID "Casella di controllo"Con l'aiuto del"getElementById ()"Metodo e archivialo in una variabile"ingresso".
- Controlla la casella di controllo impostando il "controllato" proprietà "VERO".
Per deselezionare la casella di controllo facendo clic su "NOPulsante "Usa il codice di seguito:
funzione uncheck ()Sia input = document.getElementById ('Checkbox');
ingresso.controllato = false;
Il frammento di codice sopra:
- Definire una funzione "UnCheck ()"Ciò attiverà il pulsante Clicca per deselezionare la casella di controllo.
- All'interno del corpo della funzione, ottenere il riferimento della casella di controllo utilizzando il suo ID "Casella di controllo"Con l'aiuto del"getElementById ()"Metodo e archivialo in una variabile"ingresso".
- Deseleziona la casella di controllo impostando "controllato" proprietà "falso".
Infine, definire una funzione per deselezionare la casella di controllo per impostazione predefinita nella pagina Carica usando "finestra.Onload"Evento:
finestra.onload = function ()finestra.addEventListener ('load', controllo, falso);
Produzione
L'output indica che la casella di controllo è controllata e deselezionata correttamente mentre si fa clic sui pulsanti.
Esempio 2: controlla/deseleziona più caselle di controllo
Vediamo un esempio di come controllare o deselezionare tutte le caselle di controllo contemporaneamente.
Innanzitutto, crea un file HTML, quindi crea più caselle di controllo e un pulsante con l'ID "interruttore"Ciò attiverà la casella di controllo per controllare o deselezionare:
Fare clic sul pulsante per controllare o deselezionare tutte le caselle di controllo
Controlla o non controllami
Controlla o non controllami
Controlla o non controllami
Controlla o non controllami
Controlla o non controllami
L'output corrispondente sarà:
Successivamente, in un file o tag JavaScript, aggiungi il codice seguente per verificare o deselezionare l'elenco delle caselle di controllo con un singolo clic. Innanzitutto, ottieni il riferimento del pulsante utilizzando il suo ID "Attiva" e memorizzalo in un "pulsante" variabile e quindi collega un evento OnClick e invoca una funzione "Checkallboxes"Ciò controllerà l'elenco delle caselle di controllo e quindi chiama la funzione successiva"Uncheckallboxes":
Var Button = Document.getElementById ("Tpogle");pulsante.OnClick = checkallboxes;
Per controllare le caselle di controllo, utilizzare il codice di seguito
funzione checkallboxes ()var input = document.QuerySelectorall ('.Casella di controllo ');
per (var i = 0; i < input.length; i++)
Input [i].controllato = vero;
Questo.OnClick = UncheckAllboxes;
In questo codice sopra:
- Innanzitutto, definire una funzione "checkallboxes ()"Ciò attiverà il pulsante Fare clic per controllare tutte le caselle di controllo.
- All'interno del corpo della funzione, ottenere i riferimenti di tutte le caselle di controllo utilizzando le loro classi assegnate "Casella di controllo"Con l'aiuto del"QuerySelectorAll ()"Metodo e archivialo in una variabile"ingresso".
- Itera le caselle di controllo e imposta il "controllato" proprietà "VERO"Per controllare tutte le caselle di controllo.
- Dopo aver controllato tutte le caselle di controllo, chiamare l'altra funzione "Uncheckallboxes"Sull'evento fai clic per attivare il pulsante.
Per deselezionare l'elenco della casella di controllo facendo clic sul pulsante, utilizzare le righe seguenti del codice:
funzione uncheckallboxes ()var input = document.QuerySelectorall ('.Casella di controllo ');
per (var i = 0; i < input.length; i++)
Input [i].controllato = false;
Questo.OnClick = checkallboxes;
In questo frammento di codice sopra:
- Definire una funzione "uncheckallboxes ()"Ciò attiverà il pulsante Clicca per deselezionare tutte le caselle di controllo.
- All'interno del corpo della funzione, ottenere i riferimenti di tutte le caselle di controllo utilizzando le loro classi assegnate "Casella di controllo"Con l'aiuto del"QuerySelectorAll ()"Metodo e archivialo in una variabile"ingresso".
- Itera le caselle di controllo e imposta il "controllato" proprietà "falso"Per deselezionare tutte le caselle di controllo.
- Dopodiché, chiama l'altra funzione "Checkallboxes"Sull'evento fai clic per attivare il pulsante.
Produzione
L'output indica che l'elenco delle caselle di controllo viene controllata o deselezionata correttamente con un singolo pulsante.
Conclusione
Per controllare o deselezionare le caselle di controllo, usa il “controllato" proprietà. Dopo aver ottenuto il riferimento dell'elemento "Casella di controllo"Usando il suo"id"Con l'aiuto del"getElementById ()"Metodo, controlla la casella di controllo impostando il"controllato" attribuire a "VERO". Allo stesso modo, imposta il “controllato" attribuire a "falso"Per deselezionare la casella di controllo. Questo articolo descrive la procedura per verificare e deselezionare la casella di controllo utilizzando JavaScript.