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:

See the gist on github.

Lo obtengo así:

See the gist on github.

Saber si checkbox está marcado

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

See the gist on github.

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

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í:

See the gist on github.

Y el JavaScript así:

See the gist on github.

Puedes probar el ejemplo en línea.