JavaScript se puede usar para manipular el comportamiento de los elementos HTML de una página. Uno de los elementos más utilizados sería la etiqueta de entrada . La entrada se utiliza para crear una interfaz de usuario interactiva (UI) con el propósito de tomar información del usuario.

La etiqueta de entrada tiene varios tipos. Algunos de estos tipos incluyen un botón, imagen, casilla de verificación, radio. Aparte de los tipos, hay varios atributos del etiqueta de entrada . Estos atributos son compatibles con ciertos tipos, por ejemplo, el comprobado El atributo no es compatible con el tipo de botón, ya que solo es compatible con una casilla de verificación o un botón de radio.

Casilla de verificación y propiedad marcada

Cuando crea un formulario para tomar información del usuario, a menudo está utilizando un tipo de entrada llamado caja. Este caja Aprovecha solo un atributo y esa es la propiedad del atributo marcado \. Muy brevemente, vamos a ver cómo funciona esta casilla de verificación, y luego lo vamos a manipular correctamente usando JavaScript.

Comencemos mostrando una casilla de verificación simple en una página HTML. Use el siguiente código para crear una casilla de verificación:

Esta es una casilla de verificación

Como puede ver, creamos una etiqueta de entrada y le dio un nombre e identificación, y el texto para mostrar al lado.

El fragmento de código completo para una mejor demostración sería así:

Tutorial de Linuxhint

Casilla de verificación Manipulación de propiedades verificadas usando JavaScript


Esta es una casilla de verificación

La salida es:

Como podemos ver, tenemos una casilla de verificación que se muestra en la pantalla. Agregamos la propiedad "marcada" para que la casilla de verificación ya esté marcada cuando la página se carga. Para agregar la propiedad "verificada", use la siguiente línea en su código:

Esta es una casilla de verificación

Podemos confirmar esto incluso yendo a las herramientas del desarrollador del navegador y luego a la pestaña Propiedades, donde podemos ver la propiedad "comprobado"Y su valor como:

Podemos cambiar la propiedad marcada haciendo clic en la casilla de verificación en sí, como:

Pero, ¿qué pasa si queremos usar JavaScript para manipular la propiedad marcada?.

Cómo cambiar la propiedad verificada usando JavaScript

Para usar JavaScript para alterar elementos en el HTML, vamos a crear un disparador. Un gatillo puede ser cualquier cosa, puede ser un evento, o ubicación del mouse, o un botón. Requeriremos dos botones. Uno de los cuales cambiará el "comprobado"El valor de la propiedad a verdadero y el otro para cambiarlo a" falso "

Primero creemos los dos botones usando las siguientes líneas.

Controlar
Desactivar

Estas líneas crearían los dos botones en la pantalla como:

Es hora de unir estos botones con las funciones que hemos definido dentro del "al hacer clic" propiedad.

Para crear estas dos funciones, use los siguientes comandos dentro de la etiqueta de script .

Ejecute el archivo nuevamente y haga clic en estos botones para examinar el comportamiento de la casilla de verificación.

Tendrás este comportamiento.

Como puede ver, ahora estamos cambiando el comprobado El valor de la propiedad de la casilla de verificación con JavaScript.

Conclusión

JavaScript se puede usar para manipular el valor del "comprobado"Propiedad de un caja dentro de etiqueta. Los elementos HTML a menudo se manipulan usando JavaScript, y estas manipulaciones a menudo se realizan como resultado de alguna acción, tal vez después de que el usuario presione un botón o haga clic en la pantalla. Revisamos brevemente qué son las casillas de verificación, cómo crearlas, cuál es su propiedad "verificada" y cómo manipular esa propiedad cuando el usuario presiona un botón usando JavaScript.