Aquest escrit descriurà el procediment per marcar i desmarcar la casella de selecció mitjançant JavaScript.
Com marcar/desmarcar la casella de selecció amb JavaScript?
Per marcar o desmarcar les caselles de verificació de JavaScript, utilitzeu ' comprovat ” atribut. Primer, obteniu la referència de l'element HTML ' casella de selecció 'amb l'ajuda dels seus' assignats id ' utilitzant el ' getElementById() ” i, a continuació, apliqueu el “ comprovat ” propietat pel seu valor.
Exemple 1: marqueu/desmarqueu la casella de selecció única
Primer, creeu un fitxer HTML, amb les següents línies de codi:
< h3 > Feu clic als botons per marcar o desmarcar la casella de selecció h3 >
< tipus d'entrada = 'casilla de verificació' id = 'casilla de verificació' > D'acord amb els termes i condicions < br >< br >
< tipus de botó = 'botó' fent clic = 'comprova ()' > Sí botó >
< tipus de botó = 'botó' fent clic = 'desmarqueu()' > No botó >
En el codi anterior:
- Creeu una casella de selecció, amb l'identificador ' casella de selecció ' que s'utilitzarà per accedir a l'element ' casella de selecció ” per realitzar accions.
- Creeu dos botons, ' Sí ' i ' No ”, per marcar o desmarcar la casella de selecció que activarà la funció “ comprovar () ' i ' desmarca () ” respectivament a l'esdeveniment de clic.
Després d'executar el codi anterior, la sortida serà així:
A continuació, definiu les funcions per realitzar accions a la casella de selecció del fitxer JavaScript o de l'etiqueta. Per marcar la casella de selecció, utilitzeu les línies de codi següents:
funció comprovar ( ) {
deixar entrar = document. getElementById ( 'casilla de verificació' ) ;
entrada. comprovat = veritat ;
}
En el codi anterior:
- Definiu una funció ' comprovar () ” que activarà el clic del botó per marcar la casella de selecció.
- Dins del cos de la funció, obteniu la referència de la casella de selecció utilitzant el seu identificador ' casella de selecció ' amb l'ajuda del ' getElementById() ” i emmagatzemar-lo en una variable “ entrada ”.
- Marqueu la casella de selecció configurant el ' comprovat ' propietat ' veritat ”.
Per desmarcar la casella de selecció fent clic a ' No ', utilitzeu el codi que s'indica a continuació:
funció desmarqueu ( ) {deixar entrar = document. getElementById ( 'casilla de verificació' ) ;
entrada. comprovat = fals ;
}
El fragment de codi anterior:
- Definiu una funció ' desmarca () ” que activarà el clic del botó per desmarcar la casella de selecció.
- Dins del cos de la funció, obteniu la referència de la casella de selecció utilitzant el seu identificador ' casella de selecció ' amb l'ajuda del ' getElementById() ” i emmagatzemar-lo en una variable “ entrada ”.
- Desmarqueu la casella de selecció configurant el ' comprovat ' propietat ' fals ”.
Finalment, definiu una funció per desmarcar la casella de selecció de manera predeterminada a la càrrega de la pàgina utilitzant el ' finestra.carrega ” esdeveniment:
finestra. carregar = funció ( ) {finestra. addEventListener ( 'càrrega' , comprovar , fals ) ;
}
Sortida
La sortida significa que la casella de selecció està marcada i desactivada correctament mentre feu clic als botons.
Exemple 2: marqueu/desmarqueu diverses caselles de verificació
Vegem un exemple de com marcar o desmarcar totes les caselles de selecció alhora.
Primer, creeu un fitxer HTML i, a continuació, creeu diverses caselles de selecció i un botó amb l'identificador ' alternar ” que activarà la casella de selecció per marcar o desmarcar:
< h3 > Feu clic al botó per marcar o desmarcar totes les caselles de selecció h3 >< tipus d'entrada = 'casilla de verificació' classe = 'casilla de verificació' > Comprova o desmarca'm < br >
< tipus d'entrada = 'casilla de verificació' classe = 'casilla de verificació' > Comprova o desmarca'm < br >
< tipus d'entrada = 'casilla de verificació' classe = 'casilla de verificació' > Comprova o desmarca'm < br >
< tipus d'entrada = 'casilla de verificació' classe = 'casilla de verificació' > Comprova o desmarca'm < br >
< tipus d'entrada = 'casilla de verificació' classe = 'casilla de verificació' > Comprova o desmarca'm < br >< br >
< tipus d'entrada = 'botó' id = 'canviar' valor = 'Feu clic per activar les caselles de selecció' >
La sortida corresponent serà:
Després d'això, en un fitxer JavaScript o en una etiqueta