Activar y desactivar casillas de verificación en jQuery
-
Alternar casillas de verificación usando el método
.prop() -
Alternar casillas de verificación usando el método
.each() -
Alternar casillas de verificación usando el método
.trigger()
Este artículo explica tres métodos que le permitirán alternar varias casillas de verificación a la vez usando jQuery. Los tres métodos utilizarán tres métodos disponibles en jQuery; estos son .prop(), .each(), y .trigger().
Alternar casillas de verificación usando el método .prop()
En jQuery, puede usar el método .prop() para establecer las propiedades de los elementos HTML. Aquí, puede usarlo en las casillas de verificación de su código para alternar su estado entre “marcado” y “no marcado”.
El siguiente ejemplo le muestra cómo se hace; en él tenemos un código HTML y jQuery. El HTML contiene casillas de verificación, y hacer clic en la primera las marca todas.
Agregamos un evento de clic a la primera casilla de verificación en el código jQuery. Luego, manipulamos la propiedad marcada de las casillas de verificación restantes.
La primera vez que marca la primera casilla de verificación, se marcan todas las casillas de verificación. Si lo desmarca, las casillas de verificación restantes vuelven a su estado predeterminado; “desenfrenado”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-lang"> Select all languages
</label>
<label>
<input type="checkbox" class="tech"> Cascading Style Sheets
</label>
<label>
<input type="checkbox" class="tech"> Hypertext Markup Language
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-lang").click(function() {
let check_boxes = $("input.tech");
// Swap the "prop" attribute each time the
// user clicks the "select-lang" checkbox.
check_boxes.prop("checked", !check_boxes.prop("checked"));
});
});
</script>
</body>
</html>
Producción:
Alternar casillas de verificación usando el método .each()
El método .each() para alternar casillas de verificación funciona como lo mostramos con .prop(). Pero hay una diferencia; usamos una función para iterar sobre cada casilla de verificación.
Durante esta iteración, cambiamos el estado de las casillas de verificación de “marcadas” a “no marcadas”. El siguiente código le muestra cómo se hace.
Además, hemos actualizado el HTML del primer ejemplo; esta vez, las casillas de verificación contienen el nombre de los países.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-country"> Select all countries
</label>
<label>
<input type="checkbox" class="country"> Georgia
</label>
<label>
<input type="checkbox" class="country"> Turkmenistan
</label>
<label>
<input type="checkbox" class="country"> Azerbaijan
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-country").click(function() {
// Use the ".each()" API to iterate over the
// countries and alternate them between "checked"
// and "unchecked".
$('input.country').each(function () {
this.checked = !this.checked;
});
});
});
</script>
</body>
</html>
Producción:
Alternar casillas de verificación usando el método .trigger()
Usar el método .trigger() para alternar las casillas de verificación funciona de manera diferente en comparación con el uso de .prop() y .each(). Esta vez, usamos el método .trigger() para ejecutar una función de clic en todas las casillas de verificación cuando hace clic en la primera casilla de verificación.
Otra forma es llamar al método .click() en cada casilla de verificación; ambos funcionan bien.
Pero dejamos eso como un comentario en el código, y puedes probarlo más tarde. El HTML sigue siendo el mismo, pero las casillas de verificación ahora contienen el nombre de los principales sitios web en Internet.
Encontrará todo esto en el bloque de código a continuación, y la salida en un navegador sigue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-toggle-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="form">
<label>
<input type="checkbox" id="select-websites"> Select all websites
</label>
<label>
<input type="checkbox" class="website"> Facebook
</label>
<label>
<input type="checkbox" class="website"> Amazon
</label>
<label>
<input type="checkbox" class="website"> Apple
</label>
<label>
<input type="checkbox" class="website"> Netflix
</label>
<label>
<input type="checkbox" class="website"> Google
</label>
</form>
</main>
<script>
$(document).ready(function() {
$("#select-websites").click(function() {
// Use the ".trigger()"" API to execute the
// click function on each checkbox
$('input.website').trigger('click');
// Another option is to execute the "click"
// API directly on the checkboxes
// $('input.website').click();
});
});
</script>
</body>
</html>
Producción:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn