Cómo verificar/desmarcar la casilla de verificación con JavaScript

La casilla de verificación es un tipo de elemento de entrada HTML que permite al usuario seleccionar una de varias opciones. A veces, puede haber una situación en la que las casillas de verificación deben verificarse o no ser revisadas en el caso de llenar un cuestionario, cuestionario o algunas aplicaciones que necesitan verificar cualquier permiso específico o todos los permisos simultáneamente para continuar.

Este artículo describirá el procedimiento para verificar y desmarcar la casilla de verificación con JavaScript.

Cómo verificar/desmarcar la casilla de verificación con JavaScript?

Para verificar o desmarcar las casillas de verificación en JavaScript, use 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 en su valor.

Ejemplo 1: Verifique/desmarque la casilla de verificación única
Primero, cree un archivo HTML, con las siguientes líneas de código:

Haga clic en botones para verificar o desmarcar la casilla de verificación

De acuerdo con los términos y la condición


Sí
No

En el código anterior:

• Crear una casilla de verificación, con la identificación "caja"Eso se utilizará para acceder al elemento"caja"Para realizar acciones.
• Crear dos botones, "Sí" y "No", Para verificar o desmarcar la casilla de verificación que activará la función"controlar()" y "desmarque ()"Respectivamente en el evento de clics.

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 verificar la casilla de verificación, use las líneas de código a continuación:

control de funcionamiento()
dejar entrada = documento.getElementById ('casilla de verificación);
aporte.marcado = verdadero;

En el código anterior:

• Defina una función "controlar()"Eso activará el botón Haga clic para verificar 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 guárdelo en una variable"aporte".
• Verifique la casilla de verificación configurando el "comprobado" propiedad "verdadero".

Para desmarcar la casilla de verificación haciendo clic en "No"Botón, use el código dado a continuación:

function Uncheck ()
dejar entrada = documento.getElementById ('casilla de verificación);
aporte.marcado = falso;

El fragmento de código anterior:

• Defina una función "desmarque ()"Eso 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 guárdelo 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.encendido" evento:

ventana.onload = function ()
ventana.addEventListener ('cargar', verificar, falso);

Producción

La salida significa que la casilla de verificación se verifica y desactiva correctamente mientras hace clic en los botones.

Ejemplo 2: Verifique/desmarque múltiples casillas de verificación
Veamos un ejemplo de cómo verificar o desmarcar todas las casillas de verificación al mismo tiempo.

Primero, cree un archivo HTML y luego cree múltiples casillas de verificación y un botón con la ID "palanca"Eso alternará la casilla de verificación para verificar o desmarcar:

Haga clic en el botón para verificar o desmarcar todas las casillas de verificación

Comprobarme o desmarque

Comprobarme o desmarque

Comprobarme o desmarque

Comprobarme o desmarque

Comprobarme o desmarque

La salida correspondiente será:

Después de eso, en un archivo o etiqueta de JavaScript, agregue el código siguiente para verificar o desmarcar la lista de casillas de verificación con un solo clic. Primero, obtenga la referencia del botón utilizando su ID "Toggle" y guárdelo en un "botón" variable y luego adjunte un evento en el cierre e invoque una función "cajas de control"Eso verificará la lista de casillas de verificación y luego llama a la siguiente función"cajas no":

botón var = documento.getElementById ("Toggle");
botón.onClick = checkAllboxes;

Para verificar las casillas de verificación, use el código dado a continuación

function checkAllBoxes ()
entrada var = documento.QuerySelectorall ('.caja');
para (var i = 0; i < input.length; i++)
entrada [i].marcado = verdadero;

este.onClick = UncheckallBoxes;

En este código anterior:

• Primero, defina una función "CheckallBoxes ()"Eso se activará en el botón Haga clic para verificar todas las casillas de verificación.
• Dentro del cuerpo de la función, obtenga las referencias de todas las casillas de verificación utilizando sus clases asignadas "caja"Con la ayuda del"QuerySelectorAll ()"Método y guárdelo en una variable"aporte".
• Iterar las casillas de verificación y establecer el "comprobado" propiedad "verdadero"Para verificar todas las casillas de verificación.
• Después de verificar todas las casillas de verificación, llame a la otra función "cajas no"En el evento de clic para alternar el botón.

Para desmarcar la lista de la casilla de verificación haciendo clic en el botón, use las líneas de código a continuación:

función uncheckallboxes ()
entrada var = documento.QuerySelectorall ('.caja');
para (var i = 0; i < input.length; i++)
entrada [i].marcado = falso;

este.onClick = checkAllboxes;

En este fragmento de código anterior:

• Defina una función "UncheckallBoxes ()"Que activará el clic del botón para desmarcar todas las casillas de verificación.
• Dentro del cuerpo de la función, obtenga las referencias de todas las casillas de verificación utilizando sus clases asignadas "caja"Con la ayuda del"QuerySelectorAll ()"Método y guárdelo en una variable"aporte".
• Iterar las casillas de verificación y establecer el "comprobado" propiedad "FALSO"Para desmarcar todas las casillas de verificación.
• Después de eso, llame a la otra función "cajas de control"En el evento de clic para alternar el botón.

Producción

La salida indica que la lista de casillas de verificación se verifica o no se verifica correctamente con un solo botón.

Conclusión

Para verificar o desmarcar las casillas de verificación, use el "comprobado" propiedad. Después de obtener la referencia del elemento "caja"Usando su"identificación"Con la ayuda del"getElementById ()Método ", verifique la casilla de verificación configurando el"comprobado" atribuir a "verdadero". Del mismo modo, establezca el "comprobado" atribuir a "FALSO"Para desmarcar la casilla de verificación. Este artículo describe el procedimiento para verificar y desmarcar la casilla de verificación con JavaScript.