Questo articolo illustrerà i metodi per selezionare e deselezionare tutte le caselle di controllo utilizzando JavaScript.
Come selezionare e deselezionare tutte le caselle di controllo utilizzando JavaScript?
Per selezionare e deselezionare tutte le caselle di controllo in JavaScript, puoi applicare:
- “ document.getElementsByName ” con le caselle di controllo
- “ document.getElementsByName ” metodo con i pulsanti
Gli approcci menzionati verranno ora discussi uno per uno!
Metodo 1: selezionare e deselezionare tutte le caselle di controllo in JavaScript utilizzando il metodo 'document.getElementsByName()' con 'caselle di controllo'
Il ' document.getElementsByName() ” 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.
Esaminiamo il seguente esempio per la dimostrazione.
Esempio
Innanzitutto, il tipo di input sarà specificato come ' casella di controllo ” e un nome e un valore specifici verranno assegnati a ciascuna casella di controllo:
< tipo di ingresso = 'casella di controllo' nome = 'Appena' valore = 'Pitone' > Pitone < fr />< tipo di ingresso = 'casella di controllo' nome = 'Appena' valore = 'Giava' > Giava < fr />
< tipo di ingresso = 'casella di controllo' nome = 'Appena' valore = 'JavaScript' > JavaScript < fr />
Ora includi una casella di controllo aggiuntiva con il valore ' Seleziona tutto ” e allega un “ al clic() ' evento con questa casella di controllo che funzionerà in modo tale quando si farà clic sulla casella di controllo, il ' spunta Deselezionato ()' verrà invocato con l'oggetto ' questo ” come argomento:
< tipo di ingresso = 'casella di controllo' al clic = 'selezionaDeseleziona(questo)' /> Seleziona tutto < fr />
Successivamente, definisci una funzione denominata ' checkDeseleziona() ” nel file JavaScript, con una variabile denominata “ casella di controllo ” come argomento. Ora, accedi ai valori della casella di controllo utilizzando ' document.getElementsByName() ” e posizionare il valore di “ nome ” come argomento.
Infine, applica un ' per ” loop per scorrere tutti i valori della casella di controllo e utilizzare il “ controllato ” per contrassegnarli tutti come selezionati:
controllo della funzione Deseleziona ( casella di controllo ) {ottenere = documento. getElementsByName ( 'Appena' ) ;
per ( era in = 0 ; io < ottenere. lunghezza ; io ++ ) {
ottenere [ io ] . controllato = casella di controllo. controllato ; }
}
Come puoi vedere, quando il “ Seleziona tutto ” è contrassegnata, anche tutte le altre caselle di controllo sono contrassegnate come selezionate:
Metodo 2: selezionare e deselezionare tutte le caselle di controllo in JavaScript utilizzando il metodo 'document.getElementsByName()' con i 'pulsanti'
Il ' document.getElementsByName() ” metodo, come discusso nel metodo precedente, recupera gli elementi con il nome specificato nei suoi argomenti. Può essere utilizzato per selezionare o deselezionare tutte le caselle di controllo aggiunte su una pagina web.
Guarda il seguente esempio per la dimostrazione.
Esempio
Ora includeremo due pulsanti sia per ' Controlla tutto ' e ' Deseleziona tutto ” funzionalità. Quindi, allega un ' al clic ” evento con entrambi i pulsanti che accederanno separatamente alle funzioni specificate:
< tipo di ingresso = 'pulsante' al clic = 'dai un'occhiata()' valore = 'Controlla tutto' />< tipo di ingresso = 'pulsante' al clic = 'unCheck()' valore = 'Deseleziona tutto' />
Quindi, definisci una funzione denominata ' dai un'occhiata() ” e applicare il “ document.getElementsByName ” metodo con il valore specificato di “ nome ” attributo. Quindi, iterare ' per ” scorre tutti i valori delle caselle di controllo discussi nel metodo precedente.
Inoltre, quando si fa clic sul pulsante associato, il “ controllato ' proprietà contrassegnerà tutte le caselle di controllo e imposterà lo stato selezionato come ' VERO ”:
controllo funzionale ( ) {essere capra = documento. getElementsByName ( 'dai un'occhiata' ) ;
per ( era in = 0 ; io < ottenere. lunghezza ; io ++ ) {
ottenere [ io ] . controllato = VERO ; }
}
Quindi, definisci una funzione denominata ' deseleziona() ', e aggiungi la funzionalità inversa al suo interno per contrassegnare la proprietà della casella selezionata come ' falso ”:
funzione deseleziona ( ) {essere capra = documento. getElementsByName ( 'dai un'occhiata' ) ;
per ( era in = 0 ; io < ottenere. lunghezza ; io ++ ) {
ottenere [ io ] . controllato = falso ; }
}
Può vedere nell'output che i pulsanti aggiunti funzionano perfettamente:
Abbiamo fornito i metodi più semplici per selezionare e deselezionare tutte le caselle di controllo utilizzando JavaScript.
Conclusione
Per selezionare e deselezionare tutte le caselle di controllo utilizzando JavaScript, utilizzare il ' document.getElementsByName() ” metodo con “ Caselle di controllo ” per aggiungere una casella di controllo e accedere alla funzione, che comporterà la spunta delle caselle di controllo o applicare lo stesso metodo con “ Bottoni ” per includere due pulsanti separatamente per controllare e deselezionare tutti i valori specificati. Questo articolo ha spiegato i metodi per selezionare e deselezionare tutte le caselle di controllo utilizzando JavaScript.