Questo articolo descriverà la procedura per selezionare e deselezionare la casella di controllo utilizzando JavaScript.
Come selezionare/deselezionare la casella di controllo utilizzando JavaScript?
Per selezionare o deselezionare le caselle di controllo in JavaScript, utilizzare il ' controllato 'attributo. Innanzitutto, ottieni il riferimento dell'elemento HTML ' casella di controllo ” con l'aiuto dei suoi incaricati “ id ' usando il ' getElementById() ', quindi applicare il metodo' controllato ” proprietà sul suo valore.
Esempio 1: selezionare/deselezionare la casella di controllo singola
Innanzitutto, crea un file HTML, con le seguenti righe di codice:
< h3 > Fare clic sui pulsanti per selezionare o deselezionare la casella di controllo h3 >
< tipo di ingresso = 'casella di controllo' id = 'casella di controllo' > Accetta i termini e le condizioni < fratello >< fratello >
< tipo di pulsante = 'pulsante' al clic = 'dai un'occhiata()' > sì pulsante >
< tipo di pulsante = 'pulsante' al clic = 'deseleziona()' > No pulsante >
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 compiere azioni.
- Crea due pulsanti, ' sì ' e ' No ”, per selezionare o deselezionare la casella di controllo che attiverà la funzione “ dai un'occhiata() ' e ' deseleziona() ” rispettivamente sull'evento click.
Dopo aver eseguito il codice precedente, l'output sarà simile a questo:
Successivamente, definisci le funzioni per eseguire azioni sulla casella di controllo nel file JavaScript o nel tag. Per selezionare la casella di controllo, utilizzare le seguenti righe di codice:
funzione dai un'occhiata ( ) {
lasciare l'input = documento. getElementById ( 'casella di spunta' ) ;
ingresso. controllato = VERO ;
}
Nel codice sopra:
- Definire una funzione ' dai un'occhiata() ” che attiverà il clic del pulsante per selezionare la casella di controllo.
- All'interno del corpo della funzione, ottieni il riferimento della casella di controllo usando il suo id ' casella di controllo ” con l'aiuto del “ getElementById() ” metodo e memorizzarlo in una variabile “ ingresso ”.
- Seleziona la casella di controllo impostando ' controllato ' proprietà ' VERO ”.
Per deselezionare la casella di controllo facendo clic sul pulsante ' No ” pulsante, utilizzare il codice indicato di seguito:
funzione deselezionare ( ) {lasciare l'input = documento. getElementById ( 'casella di spunta' ) ;
ingresso. controllato = falso ;
}
Il frammento di codice sopra:
- Definire una funzione ' deseleziona() ” che attiverà il clic del pulsante per deselezionare la casella di controllo.
- All'interno del corpo della funzione, ottieni il riferimento della casella di controllo usando il suo id ' casella di controllo ” con l'aiuto del “ getElementById() ” metodo e memorizzarlo in una variabile “ ingresso ”.
- Deseleziona la casella di controllo impostando ' controllato ' proprietà ' falso ”.
Infine, definisci una funzione per deselezionare la casella di controllo per impostazione predefinita al caricamento della pagina utilizzando il ' window.onload evento:
finestra. onload = funzione ( ) {finestra. addEventListener ( 'carico' , dai un'occhiata , falso ) ;
}
Produzione
L'output indica che la casella di controllo è selezionata e deselezionata correttamente mentre si fa clic sui pulsanti.
Esempio 2: selezionare/deselezionare più caselle di controllo
Vediamo un esempio di come selezionare 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 ' alternare ” che attiverà la casella di controllo per selezionare o deselezionare:
< h3 > Fare clic sul pulsante per selezionare o deselezionare tutte le caselle di controllo h3 >< tipo di ingresso = 'casella di controllo' classe = 'casella di controllo' > Seleziona o deselezionami < fratello >
< tipo di ingresso = 'casella di spunta' classe = 'casella di spunta' > Seleziona o deselezionami < fratello >
< tipo di ingresso = 'casella di spunta' classe = 'casella di spunta' > Seleziona o deselezionami < fratello >
< tipo di ingresso = 'casella di spunta' classe = 'casella di spunta' > Seleziona o deselezionami < fratello >
< tipo di ingresso = 'casella di spunta' classe = 'casella di controllo' > Seleziona o deselezionami < fratello >< fratello >
< tipo di ingresso = 'pulsante' id = 'attiva' valore = 'Fai clic per attivare o disattivare le caselle di controllo' >
L'output corrispondente sarà:
Successivamente, in un file JavaScript o tag