Cómo verificar si la casilla de verificación se verifica usando JavaScript

La casilla de verificación es un tipo de entrada HTML que actúa como un cuadro de selección. Se utiliza para seleccionar o anular la selección de una determinada opción. Las casillas de verificación se utilizan con frecuencia para permitir a los visitantes interactuar con las páginas web y, a menudo, publicar datos en un backend revisando el cuadro que se aplica a una determinada condición.

Este manual demostrará la técnica para verificar si la casilla de verificación está marcada o no.

Cómo verificar si la casilla de verificación se verifica usando JavaScript?

Para determinar si se verifica la casilla de verificación, use el "comprobado" propiedad. Como sabemos, cada elemento contiene algunas características que permiten a JavaScript controlarlo de ciertas maneras y la propiedad marcada de la casilla de verificación es una de estas. La propiedad marcada proporciona el valor booleano verdadero o falso cuando se selecciona una casilla de verificación.

Ejemplo 1: Uso del evento OnClick () para verificar si se verifica la casilla de verificación
Primero crearemos una casilla de verificación que adjunte el "al hacer clic()"Evento que invocará el usuario definido"boxchecked ()Función para verificar si la casilla de verificación está marcada o no:

Marque la casilla para aceptar términos y condiciones:

Acepto todos los términos y condiciones.

En el archivo JavaScript, definiremos una función llamada "boxchecked ()", Que primero obtendrá la identificación de la casilla de verificación usando el"getElementById ()"Método y luego aplique la propiedad marcada de tal manera que el valor devuelto verificado esté configurado en"verdadero"Si está marcado como se verifica. Luego, se mostrará una alerta con el mensaje "La casilla de verificación está marcada! Gracias por aceptar:":

función boxchecked ()
casilla de verificación var = documento.getElementById ("casilla de verificación");
if (casilla de verificación.marcado == true)
alerta ("La casilla de verificación está marcada! Gracias por aceptar:");

La salida correspondiente se muestra a continuación:

Ejemplo 2: Uso del método addEventListener () para verificar si se verifica la casilla de verificación
Aquí, crearemos una casilla de verificación sin un evento OnClick (). Luego, agregaremos un párrafo y su pantalla se establece como "ninguno"Hasta que la casilla de verificación no esté marcada. En el otro caso, cuando la casilla de verificación se marca como se marca, su texto agregado se mostrará en color verde:

Acepto todos los términos y condiciones.

COMPROBADO!

También puede verificar si la casilla de verificación está marcada o no sin usar el evento OnClick (). Aquí, usaremos otro método llamado "addEventListener ()" con el "QuerySelector ()Método "utilizando la propiedad marcada de la casilla de verificación. Esto funcionará de tal manera que el método QuerySelector () primero seleccionará el primer elemento coincidente con la ID agregada, y luego el método AddEventListener () asociará el ""hacer clic"Evento con él:

VAR Text = documento.getElementById ("texto");
documento.QuerySelector ('#casilla de verificación').addEventListener ('Click', (Event) =>
if (evento.objetivo.comprobado)
texto.estilo.display = "bloque";

)

Se puede ver que, cuando se marca la casilla de verificación, el contenido agregado se muestra en color verde:

Todo lo que necesita saber sobre cómo determinar si se le ha proporcionado una casilla de verificación o no.

Conclusión

Para determinar si se verifica la casilla de verificación, utilice la casilla de verificación "comprobado" propiedad. La propiedad marcada genera un valor booleano verdadero si se verifica; de lo contrario, da falso. Para la verificación, puede usar dos procedimientos diferentes; Uno es el evento OnClick (), y el otro es el método AddEventListener (). En este manual, hemos descrito el procedimiento para verificar si la casilla de verificación está marcada o no utilizando JavaScript.