Blog
Cómo seleccionar o marcar como chequeado (checked) todos los checkbox con jQuery
En esta oportunidad vamos a ver cómo seleccionar o marcar como chequeado todos los checkbox de un formulario o listado con jQuery y Java Script. Esta funcionalidad se suele utilizar muchísimo en los sitios web con listados muy largos, donde el usuario tiene la posibilidad de realizar determinada acción (como por ejemplo borrar) sobre todos los items, en lugar de hacerlo de a uno a la vez, lo cual puede ser bastante tedioso.
Si bien esta funcionalidad se puede realizar con solamente Java Script en este tutorial vamos a utilizar la famosa librería jQuery, para poder hacer mucho más sencillo el código.
Código completo para seleccionar todos los checkbox
A continuación dejamos el código completo para seleccionar o marcar como checked todos los checkbox de un listado en particular.
<html>
<head>
<title>Cómo seleccionar o marcar como chequeado (checked) todos los checkbox con jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="seleccionar-todos"> Seleccionar todos<br>
<div id="listado">
<input type="checkbox" name="opcion" value="uno"> Opción uno<br>
<input type="checkbox" name="opcion" value="dos"> Opción dos<br>
<input type="checkbox" name="opcion" value="tres"> Opción tres<br>
</div>
<script>
$(function(){
$('#seleccionar-todos').change(function() {
$('#listado > input[type=checkbox]').prop('checked', $(this).is(':checked'));
});
});
</script>
</body>
</html>
Al ejecutar el código anterior en tu navegador vas a poder ver un listado de checkbox sin seleccionar, y un checkbox al principio, el cual se va a utilizar para poder seleccionar o quitar la selección de todos los input. Como se puede ver simplemente es necesario detectar el evento change del input principal para saber cuando marcar o no al resto.
Esto es todo lo necesario para poder realizar la funcionalidad de seleccionar todos los checkbox con Java Script y jQuery, el código ofrecido se puede utilizar libremente en cualquier proyecto personal o comercial. Ante cualquier inconveniente que surja en la implementación pueden dejar un comentario al final del tutorial ofrecido.