Come controllare e deselezionare tutte le caselle di controllo utilizzando JavaScript

Ci può essere una situazione in cui tutte le caselle di controllo devono essere controllate o incontrollate nel caso di qualsiasi questionario o quiz. Ad esempio, è necessario effettuare più selezioni da un elenco di elementi specifici o non fare alcuna selezione o quando è necessario selezionare o cancellare le opzioni selezionate in un modulo in una go. In tali casi, il controllo e l'implesso di tutte le caselle di controllo utilizzando JavaScript diventa molto utile e temporale.

Questo articolo dimostrerà i metodi per il controllo e deselezionerà tutte le caselle di controllo utilizzando JavaScript.

Come controllare e deselezionare tutte le caselle di controllo utilizzando JavaScript?

Per verificare e deselezionare tutte le caselle di controllo in JavaScript, è possibile applicare:

• "documento.getelementsByName"Metodo con le caselle di controllo
• "documento.getelementsByName"Metodo con i pulsanti

Gli approcci menzionati saranno ora discussi uno per uno!

Metodo 1: controllare e deselezionare tutte le caselle di controllo in JavaScript usando "Documento.Metodo getElementsByName () "con" caselle di controllo "

IL "documento.getElementsByName ()"Il metodo restituisce gli elementi con il nome specificato nei suoi argomenti. Questo metodo verrà applicato per recuperare il valore di ciascuna casella di controllo con l'aiuto del nome passato.

Passiamo attraverso il seguente esempio per la dimostrazione.

Esempio

Innanzitutto, il tipo di input verrà specificato come "Casella di controllo"E un nome e un valore specifici verranno assegnati su ogni casella di controllo:

Pitone

Giava

JavaScript

Ora, includi una casella di controllo aggiuntiva con il valore "Seleziona tutto”E allegare un"al clic()"Evento con questa casella di controllo che funzionerà in modo tale quando verrà cliccata la casella di controllo,"Checkuncheck() "Il metodo sarà invocato con l'oggetto"Questo"Come argomento:

Seleziona tutto

Successivamente, definisci una funzione chiamata "checkuncheck ()"Nel file JavaScript, con una variabile denominata"Casella di controllo"Come argomento. Ora accedi ai valori della casella di controllo utilizzando "documento.getElementsByName ()"Metodo e posizionare il valore di"nome"Attributo come argomento.

Infine, applica un “per"Loop per iterare lungo tutti i valori della casella di controllo e utilizzare il"controllato"Proprietà per contrassegnarli tutti come controllati:

funzione checkuncheck (casella di controllo)
get = document.getElementsByName ('Lang');
per (var i = 0; iOttieni [i].Casella di controllo controllato =.controllato;

Come puoi vedere, quando il "Seleziona tutto"La casella di controllo è contrassegnata, tutte le altre caselle di controllo sono anche contrassegnate come selezionate:

Metodo 2: controlla e deseleziona tutte le caselle di controllo in JavaScript usando "Documento.Metodo getElementsByName () "con" pulsanti "

IL "documento.getElementsByName ()"Metodo, come discusso nel metodo precedente, prende gli elementi con il nome specificato nei suoi argomenti. Può essere utilizzato per controllare o deselezionare tutte le caselle di controllo aggiunte in una pagina Web.

Guarda il seguente esempio per la dimostrazione.

Esempio

Ora includeremo due pulsanti per entrambi i "Controlla tutto" E "Deseleziona tutto"Funzionalità. Quindi, allegare un "al clic"Evento con entrambi i pulsanti che accede alle funzioni specificate separatamente:

Successivamente, definisci una funzione chiamata "controllo()"E applicare il"documento.getelementsByName"Metodo con il valore specificato del"nome"Attributo. Quindi, itera il "per"Loop lungo tutti i valori della casella di controllo discussi nel metodo precedente.

Inoltre, quando si fa clic sul pulsante associato, il "controllato"La proprietà segnerà tutte le caselle di controllo e imposterà lo stato controllato come"VERO":

funzione check ()
var get = document.getElementsByName ('Check');
per (var i = 0; iOttieni [i].controllato = true;

Successivamente, definisci una funzione chiamata "UnCheck ()", E aggiungi la funzionalità inversa in essa per contrassegnare la proprietà della casella di rilievo come"falso":

funzione uncheck ()
var get = document.getElementsByName ('Check');
per (var i = 0; iOttieni [i].controllato = false;

Può vedere nell'output che i pulsanti aggiunti funzionano perfettamente:

Abbiamo fornito i metodi più semplici per controllare e deselezionare tutte le caselle di controllo utilizzando JavaScript.

Conclusione

Per controllare e deselezionare tutte le caselle di controllo utilizzando JavaScript, usa il “documento.getElementsByName ()Metodo "con"Caselle di controllo"Per aggiungere una casella di controllo e accedere alla funzione, che comporterà il controllo delle caselle di controllo o applicare lo stesso metodo"Pulsanti"Includere due pulsanti separatamente per il controllo e delezione di tutti i valori specificati. Questo articolo ha spiegato i metodi per il controllo e deselezionamento di tutte le caselle di controllo utilizzando JavaScript.