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
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");
}
});
