Este artículo describirá el procedimiento para marcar y desmarcar la casilla de verificación usando JavaScript.
¿Cómo marcar/desmarcar la casilla de verificación usando JavaScript?
Para marcar o desmarcar las casillas de verificación en JavaScript, utilice el ' comprobado ' atributo. Primero, obtenga la referencia del elemento HTML “ caja ” con la ayuda de su asignado “ identificación ' utilizando el ' getElementById() ” método, y luego, aplique el “ comprobado ” propiedad sobre su valor.
Ejemplo 1: marque/desmarque la casilla de verificación única
Primero, cree un archivo HTML, con las siguientes líneas de código:
< h3 > Haga clic en los botones para marcar o desmarcar la casilla de verificación h3 >
< tipo de entrada = 'caja' identificación = 'caja' > De acuerdo con los términos y condiciones < hermano >< hermano >
< tipo de botón = 'botón' al hacer clic = 'controlar()' > Sí botón >
< tipo de botón = 'botón' al hacer clic = 'desmarcar()' > No botón >
En el código anterior:
- Cree una casilla de verificación, con la identificación ' caja ” que se utilizará para acceder al elemento “ caja ” para realizar acciones.
- Crea dos botones, “ Sí ' y ' No ”, para marcar o desmarcar la casilla de verificación que activará la función “ controlar() ' y ' desmarcar() ” respectivamente en el evento de clic.
Después de ejecutar el código anterior, la salida será así:
A continuación, defina las funciones para realizar acciones en la casilla de verificación en el archivo JavaScript o la etiqueta. Para marcar la casilla de verificación, use las siguientes líneas de código:
función controlar ( ) {
dejar entrada = documento. getElementById ( 'caja' ) ;
aporte. comprobado = verdadero ;
}
En el código anterior:
- Definir una función “ controlar() ” que activará el clic del botón para marcar la casilla de verificación.
- Dentro del cuerpo de la función, obtenga la referencia de la casilla de verificación usando su id ' caja ” con la ayuda del “ getElementById() ” método y almacenarlo en una variable “ aporte ”.
- Marque la casilla de verificación configurando el ' comprobado ' propiedad ' verdadero ”.
Para desmarcar la casilla de verificación haciendo clic en ' No ”, utilice el código que se indica a continuación:
función desmarcar ( ) {dejar entrada = documento. getElementById ( 'caja' ) ;
aporte. comprobado = falso ;
}
El fragmento de código anterior:
- Definir una función “ desmarcar() ” que activará el clic del botón para desmarcar la casilla de verificación.
- Dentro del cuerpo de la función, obtenga la referencia de la casilla de verificación usando su id ' caja ” con la ayuda del “ getElementById() ” método y almacenarlo en una variable “ aporte ”.
- Desmarque la casilla de verificación configurando el “ comprobado ' propiedad ' falso ”.
Por último, defina una función para desmarcar la casilla de verificación de forma predeterminada en la carga de la página usando el ' ventana.onload ' evento:
ventana. cargar = función ( ) {ventana. agregarEventListener ( 'carga' , controlar , falso ) ;
}
Producción
El resultado significa que la casilla de verificación está marcada y desmarcada con éxito al hacer clic en los botones.
Ejemplo 2: marcar/desmarcar varias casillas de verificación
Veamos un ejemplo de cómo marcar o desmarcar todas las casillas a la vez.
Primero, cree un archivo HTML y luego cree varias casillas de verificación y un botón con la identificación ' palanca ” que alternará la casilla de verificación para marcar o desmarcar:
< h3 > Haga clic en el botón para marcar o desmarcar todas las casillas de verificación h3 >< tipo de entrada = 'caja' clase = 'caja' > Marcarme o desmarcarme < hermano >
< tipo de entrada = 'caja' clase = 'caja' > Marcarme o desmarcarme < hermano >
< tipo de entrada = 'caja' clase = 'caja' > Marcarme o desmarcarme < hermano >
< tipo de entrada = 'caja' clase = 'caja' > Marcarme o desmarcarme < hermano >
< tipo de entrada = 'caja' clase = 'caja' > Marcarme o desmarcarme < hermano >< hermano >
< tipo de entrada = 'botón' identificación = 'palanca' valor = 'Haga clic para alternar las casillas de verificación' >
La salida correspondiente será:
Después de eso, en un archivo JavaScript o etiqueta