Aprender a programar en JavaScript puede ser una experiencia muy satisfactoria. Pero también hay momentos en los que es común encontrarse con dificultades o con pequeñas cosas que se nos escapan y que nos despistan.
Si has llegado aquí, te estarás preguntando cómo saber si un checkbox está seleccionado en JavaScript. Y, lo cierto, es que se trata de una de las preguntas más habituales que se suelen dar en el uso de JavaScript.
¿Qué vas a encontrar en este artículo?
¿Cómo validar si un checkbox está seleccionado en JavaScript?
Es sencillo y no te va a causar ningún tipo de complicación. Lo puedes hacer por medio de dos métodos que te detallamos en las próximas líneas.
Comprobar con jQuery 1.6
Utilizando la versión 1.6 de jQuery, es posible resolver esta consulta con facilidad. Para ello, vas a tener que recurrir a “attr” y “prop”. Ambos usos permiten llegar a determinar y recuperar el valor que tiene la propiedad de un elemento determinado del código. En este caso, necesitarás comprobar qué valor se incluye en la propiedad “checked”.
Es tan fácil como tener en cuenta que con “true” se estará reflejando que la propiedad está seleccionada, y con “false” que no lo está. El código que necesitas implementar con el uso de “prop” es el siguiente:
if ($('#dia1').prop('checked') ) {
console.log("Checkbox seleccionado");
}
Para utilizar “attr” tendrás que cargar el siguiente código:
if ($('#dia1').attr('checked') ) {
console.log("Checkbox seleccionado");
}
Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier programador.
Sin embargo, si quieres acelerar al máximo tu aprendizaje, te recomendamos que veas esta lista con los mejores cursos de JavaScript del mercado. Los hemos seleccionado y analizado minuciosamente para ayudarte a elegir el mejor para ti.
Hay una tercera opción dentro del uso de jQuery. Se trata del comando .is (selector), que da opción a cruzar datos para llevar a cabo la comprobación de si un elemento está cumpliendo con el selector que se haya indicado en la consulta. Por lo tanto, lo que tienes que hacer en este caso es combinarlo con :checked, pseudo selector que te ayudará a saber si el checkbox ha sido seleccionado o no.
El código a utilizar es el siguiente:
if ($('#dia1').is(':checked') ) {
console.log("Checkbox seleccionado");
}
Si llevas mucho tiempo usando jQuery, es muy posible que estés más acostumbrado al uso de “attr”. El motivo de ello es que se trataba de la única opción disponible para esta función antes de la versión 1.6 de jQuery. Con la introducción de “prop” se han ampliado las posibilidades, pero ambos métodos continúan siendo muy eficientes a su modo.
Con “prop” se dinamiza el uso de la función y te permite hacer modificaciones en propiedades de JavaScript nativas para la interacción con las páginas. Ten en cuenta que, en base a los parámetros que adjuntes en las consultas, habrá un uso diferente que habrá que gestionar.
Si necesitas consultar el valor de una propiedad, el código que tendrás que introducir será el siguiente:
i$('#checkbox1').prop("checked");
Esa consulta te aportará el valor del elemento en cuestión del checkbox y luego, con los comandos “true” y “false” podrás modificarlo de esta manera:
$('#checkbox1').prop("checked", false);
$('#checkbox1').prop("checked", true);
Comprobar con JavaScript
El método más puro, porque lo que estarás haciendo será recurrir a JavaScript para solucionarlo. Tienes varias formas de afrontar el mismo tipo de objetivo. Una de ellas es utilizando el JavaScript más sencillo con la siguiente función:
var isChecked = document.getElementById('test').checked;
if(isChecked) {
alert('checkbox esta seleccionado');
}
Como ves, no tiene misterio. Volviendo a jQuery, también puedes definir que se detecte el estado cada vez que se pinche en el elemento. En ese caso, el código a utilizar sería el siguiente:
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked') ) {
console.log("Checkbox " + $(this).prop("id") + " (" + $(this).val() + ") => Seleccionado");
} else {
console.log("Checkbox " + $(this).prop("id") + " (" + $(this).val() + ") => Deseleccionado");
}
});
O puedes usar este código que te permitirá comprobar el momento en el que se retire la selección de un checkbox.
$('input[type=checkbox]:checked').on('change', function() {
console.log("Checkbox " + $(this).prop("id") + " (" + $(this).val() + ") => Deseleccionado");
});
Es importante entender que hay varios eventos importantes trabajando con esta función. Lo primero es tener en cuenta que el “change” es lo que te indica si se hace una selección o deselección.
Pero no es la única manera. Si utilizas el evento “click” también podrás estar atento a ello. El motivo de esto es que es el click que realiza un usuario el que suele desencadenar el cambio en el checkbox. Por lo tanto, este proceso se simplifica mucho para que sea fácil gestionarlo.
Y, si quieres llegar a obtener el total de los checkbox que se hayan seleccionado, el código que tendrás que usar será el siguiente:
$('input[type=checkbox]:checked').each(function() {
console.log("Checkbox " + $(this).prop("id") + " (" + $(this).val() + ") Seleccionado");
});
Por si lo necesitas, este es el código completo de la validación del checkbox con un ejemplode código JTML con JavaScript:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validar Checkbox</title>
<style>
body{padding: 50px;text-align: center;}
</style>
</head>
<body>
<label for="test">
<input type="checkbox" name="test" id="test">
Pincha aquí
</label>
<script>
var checkbox = document.getElementById('test');
checkbox.addEventListener("change", validaCheckbox, false);
function validaCheckbox(){
var checked = checkbox.checked;
if(checked){
alert('checkbox esta seleccionado');
}
}
</script>
</body>
</html>
¿Qué son los checkbox?
Si no has hecho ningún curso de JavaScript y HTML, es posible que tengas dudas sobre estos elementos. Pero no te preocupes, ya que es lo más normal del mundo.
Dicho esto, te explicamos que los checkbox son elementos que se materializan desde código HTML como cajas de verificación dentro de formularios.
Seguro que las has visto en más de una vez y que sabes que son un elemento fundamental en cualquier tipo de web. Para conseguir hacer un checkbox necesitas usar la etiqueta input de la siguiente manera: <input type=»checkbox»>. En base a tus necesidades, podrás personalizarla con distintos atributos. Por ejemplo, puedes usar el “checked”, que es de lo que te hemos hablado antes en relación a la pregunta con la que comenzábamos esta guía.
También puedes usar “name”, en el caso de que le quieras dar un nombre concreto que te ayude a ubicarla en JavaScript. En todos los casos, trabajando con JavaScript, recuerda que el checkbox siempre va a depender del objeto “form” que tenga el formulario.
Algunas de las principales características de los checkbox incluyen:
- Tienen forma de cuadrado con una marca de “L” torcida en su interior al marcarse
- Las opciones comparten un nombre único
- Permiten que los usuarios marquen opciones con un solo click
- Gracias a las checkbox es posible hacer la selección entre distintas opciones de un mismo grupo
¿Qué métodos y propiedades tienen los checkbox?
Los métodos que puedes usar son click(), blur() y focus() para cambiar el estado del checkbox, retirar el foco o ponerlo. En cuanto a las propiedades, dispone de checked, defaultChecked para los casos en los que el marcador siempre esté por defecto o value para saber su valor.
¿Cómo crear una checkbox con HTML y JavaScript?
Todos estos elementos permiten personalizar las checkbox dependiendo de lo que sea necesario obtener de ellas o lo que haya que ofrecer a partir de su inclusión en una web.
Las checkbox aportan profundidad a los formularios para que las opciones en manos de los usuarios no sean simplemente “sí” o “no” o “marcar todas”. Permiten seleccionar opciones determinadas y que así el valor que transmiten los formularios producidos con ellas sea superior.
Para que entiendas cómo funcionan las checkbox, utilizaremos dos partes diferenciadas de código. Por un lado, la correspondiente al código HTML, uno muy sencillo que no tiene ningún tipo de misterio.
Y por otra, la parte de código de JavaScript. Primero tendrás que trabajar en la de HTML, puesto que es la que se ocupa de la carcasa que incorpora todo el checkbox. La parte de JavaScript, como ya te imaginas, es la que corre con la responsabilidad de poner en marcha la función.
Parte de código HTML
El tag del código HTML estará envolviendo el código JavaScript que incluirás después. No tienes que colocar el tag del código en ninguna parte concreta del HTML de tu página web. Dependerá de dónde quieras que comience el proceso de carga del código JavaScript.
Aprender a programar en JavaScript y construye grandes desarrollos en poco tiempo con las mejores técnicas.
En el ejemplo que hemos escrito, hacemos un checkbox tan simple como el que se ocupa de preguntar: “¿Tienes perro?”. El checkbox permite marcar para afirmar que tienes perro. En el momento en el que el usuario ha marcado, aparece una caja de texto en la que puede escribir la raza del perro y luego pulsar el botón “Enviar”. Este sistema de checkbox es muy sencillo y te ayudará a ver las posibilidades que tiene su aplicación en el entorno de una web.
Por supuesto, como te hemos dicho antes, puedes hacer un sistema de checkbox más complejo, con más variables y posibilidades de respuesta. Pero queríamos hacer un ejemplo sencillo que te permitiera apreciar mejor su funcionamiento para que te hagas a la idea del elemento más básico de este código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form>
<fieldset>
<legend>
<bold>Checkbox</bold>
</legend>
<div class="form-group">
<label for="sitengoperro">
¿Tienes perro?
</label>
<input id="sitengoperro"
name="sitengoperro"
type="checkbox" value="yes"
onchange="tengoperroFunction()" />
<br />
</div>
<div id="tengoperro"
class="form-group">
<label for="razaperro">
Raza del perro:
</label>
<input type="text"
class="form-control"
name="razaperro"
id="razaperro" />
<br />
</div>
<button type="button"
class="btn btn-primary"
value="Verify">
Enviar
</button>
</fieldset>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Parte del código JavaScript
Una vez hemos elaborado la parte del código HTML, lo que necesitamos es pasarnos al código de JavaScript que también hay que incorporar y que, como te decíamos, se ocupa de la función. Toda la parte de poner la marca del checkbox y la carga del segundo campo donde es posible escribir, depende de que el JavaScript esté bien elaborado.
La función “tengoperroFunction” es la que se ocupará de responder al marcado del checkbox que haya realizado el usuario. Si no se marca la casilla inicial, esta segunda caja no aparecerá en la pantalla.
<script>
function tengoperroFunction() {
if (document.getElementById("tengoperro")
.checked)
{
document.getElementById("tengoperro")
.style.display = "inline";
document.getElementById("razadelperro")
.setAttribute("required", true);
} else {
document.getElementById("razadelperro")
.removeAttribute("required");
document.getElementById("tengoperro")
.style.display = "none";
}
}
</script>
Para terminar, solo tienes que unir en tu propia web el código de HTML y el de JavaScript para que quede de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script>
function tengoperroFunction() {
if (document.getElementById("tengoperro")
.checked)
{
document.getElementById("tengoperro")
.style.display = "inline";
document.getElementById("razadelperro")
.setAttribute("required", true);
} else {
document.getElementById("razadelperro")
.removeAttribute("required");
document.getElementById("tengoperro")
.style.display = "none";
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form>
<fieldset>
<legend>
<bold>Checkbox</bold>
</legend>
<div class="form-group">
<label for="sitengoperro">
¿Tienes perro?
</label>
<input id="sitengoperro"
name="sitengoperro"
type="checkbox" value="yes"
onchange="tengoperroFunction()" />
<br />
</div>
<div id="tengoperro"
class="form-group">
<label for="razaperro">
Raza del perro:
</label>
<input type="text"
class="form-control"
name="razaperro"
id="razaperro" />
<br />
</div>
<button type="button"
class="btn btn-primary"
value="Verify">
Enviar
</button>
</fieldset>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Si todo ha salido bien, deberías ver ante ti un formulario muy básico como el que te hemos descrito con la pregunta sobre el perro, su checkbox y la caja de respuesta. ¡Haz la prueba y verás lo fácil que es elaborar tu propio checkbox!
