En este post te mostraré cómo trabajar con un input de tipo checkbox en JavaScript.

Será muy simple, veremos cómo marcar / desmarcar el input, y también cómo saber si está marcado o no.

Usaremos JavaScript puro; nada de frameworks.

Obtener referencia a Checkbox

Lo primero que tenemos que hacer es tener una referencia al elemento DOM; es decir, obtener el elemento.

Para ello puedes usar getElementById o querySelector, y obviamente agregar un id al checkbox. Recuerda que además del id podrías seleccionar varios elementos a través de la clase u otros selectores, el punto al final es obtener una referencia al elemento.

Mi checkbox tiene el id miCheckbox:

Lo obtengo así:

Saber si checkbox está marcado

Para saber si un checkbox está marcado usando JavaScript, revisamos su propiedad checked. Algo así:

Esta propiedad estará en true o false.

Marcar y desmarcar checkbox

De nuevo utilizamos la propiedad checked, pero ahora la modificamos. Si queremos marcar el checkbox, establecemos su propiedad checked en true.

En caso de que queramos desmarcar el checkbox con JavaScript, establecemos su propiedad checked en false.

Por ejemplo, para desmarcarlo sería: $miCheckbox.checked = false;

Ejemplo completo

Input checkbox con JavaScript

Para terminar el post voy a poner el ejemplo en donde se muestra cómo obtener el estado del input, y también cómo cambiar el estado del mismo.

Tenemos el código HTML así:

Y el JavaScript así:

Puedes probar el ejemplo en línea.


Relacionado:  De cómo JSON salvó mi vida una vez

Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 623 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: