Checkbox en JavaScript

Dejar un comentario / HTML, javascript / Por

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:

<input id="miCheckbox" type="checkbox">

Lo obtengo así:

const $miCheckbox = document.querySelector("#miCheckbox");

Saber si checkbox está marcado

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

if ($miCheckbox.checked) {
  alert("Marcado");
} else {
  alert("Desmarcado");
}

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkbox en JavaScript</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
		<input id="miCheckbox" type="checkbox">
		<label for="miCheckbox">Mi checkbox</label>
		<br>
		<br>
		<button id="marcar">Marcar</button>
		<button id="desmarcar">Desmarcar</button>
		<button id="verEstado">Ver estado</button>
    <script src="script.js"></script>
  </body>
</html>

Y el JavaScript así:

// parzibyte.me/blog
const $miCheckbox = document.querySelector("#miCheckbox"),
	/**
	 * Los siguientes elementos son botones; no tienen que
	 * ver con el checkbox, solo son para el ejemplo
	 */
	$btnMarcar = document.querySelector("#marcar"),
	$btnDesmarcar = document.querySelector("#desmarcar"),
	$btnVerEstado = document.querySelector("#verEstado");

$btnMarcar.addEventListener("click", () => {
	$miCheckbox.checked = true;
});

$btnDesmarcar.addEventListener("click", () => {
	$miCheckbox.checked = false;
});

$btnVerEstado.addEventListener("click", () => {
	if ($miCheckbox.checked) {
		alert("Marcado");
	} else {
		alert("Desmarcado");
	}
});

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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