Como seleccionar / deseleccionar todos los checkbox con JQuery
Categories: JQuery, Tutoriales - Tags: checkboxLes voy a enseñar como crear un boton para seleccionar o deseleccionar todos los checkbox de un formulario al mismo tiempo con una sola linea de JQuery. En el último programa que realize necesite crear diferentes menus desplegables con diferentes opciones para así poder realizar búsquedas más detalladas . Pueden echar un vistazo a la demo si quieren ver como funciona (user: demo pass:demo).
En esta ocasión disponía de diferentes DIVS con sus respectivas opciones por lo que cada botón debe responder a los checkboxs de cada DIV. Partiendo del ejemplo de la foto, si tenemos el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div id="tipos_trabajo" style="display: block;"> <form id="search_form" action="busquedas.php" accept-charset="utf-8" method="post"> //Boton que se encarga de seleccionar/ deseleccionar los checkbox <input id="checkAll" onclick="checkTodos(this.id,'tipos_trabajo');" name="checkAll" type="checkbox" /> <ul> <li name="tipotrabajo"> <input class="check" type="checkbox" value="1" name="tipotrabajo[]"/> Caldereria </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="2" name="tipotrabajo[]"/> Electricidad </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="3" name="tipotrabajo[]"/> Redes </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="10" name="tipotrabajo[]"/> Carpinteria </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="15" name="tipotrabajo[]"/> Mecánica </li> </ul> </form> </div> |
Como pueden ver se trata de un simple DIV con id=”tipos_trabajo” el cual contiene un formulario con una serie de checkboxs ordenados dentro de una lista .
El primer checkbox va a ser el encargado de marcar o desmarcar el resto y para ello llama en el evento onClick a la función “checkTodos” pasandole dos atributos. Primero le pasa su propio id que en este caso es “checkAll” y el id de el DIV contenedor que es “tipos_trabajos” . Si en ves de un DIV tenemos todos los checkbox dentro de una tabla este último dato seria el id de la tabla.
Una ves que tenemos el código HTML pasemos a ver el codigo javascript.
busquedas.js
1 2 3 4 5 | function checkTodos (id,pID) { $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked')); } |
Como pueden ver la función checkTodos tan solo necesita una linea de JQuery que paso a explicar a continuación:
$( “#” + pID + ” :checkbox”) Selecciona todos los elementos checkbox dentro del DIV con id= “tipos_trabajo”.
.attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Primero comprueba si el checkbox con id “checkAll” esta checked y devuelve true o false segun el estado. Por lo que si devuelve true asigna el atributo checked, y si devuelve false no lo asigna.
$( “#” + pID + ” :checkbox”).attr(‘checked’, $(‘#’ + id).is(‘:checked’)); Por lo que resumiendo según el estado del checkbox con id=”checkAll” al hacer click , se le asigna el atributo checked o no a todos los checkbox dentro del DIV con id= “tipos_trabajos”.
Como pueden ver es muy simple de hacer y se usa muy poco código.
hola man esta realmente bueno tu aplicacion
cree que me podrias facilitar tus archivos pa chekearlos esque recien estoy enpesando con estoy y no se mucho pues .
te dejo mi correo [email protected]
desde ya gracias XD..
Gracias a vos por tu comentario, al final del artículo podes ver el ejemplo online y descargar el código. Un saludo
Muy bueno, rápido y préctico!, felicidades!!
Excelente, es exactamente lo que necesitaba, muchas gracias!! me funcionó de maravilla =)
Muy bueno!
Propuesta de mejora:
Ya sólo para rematar…
Que detecte que si no hay ninguno marcado, desmarque también el checkbox de "Seleccionar / Deseleccionar".
excelente!!! funciona de maravilla
gracias! 8D
Orale, muy buen post, yo ando haciendo pininos con esto y me a servido de mucho. Gracias!
muy buen desarrollo,
eso si se podría complementar que cuando checkeas todos, y a continuación descheckees alguno del lista, desaparezca el checkAll.
Saludos
[...] Como seleccionar / deseleccionar todos los checkbox con JQuery $(document).ready(function () { $("#clear__tiy_4").click( function() { $("#input_tiy_4").val(""); $("#output_tiy_4").attr("src","about:blank"); }); }); [...]
Muchisimas gracias opr compartir.
gracias por el codigo lo habia visto en javascript pero no en jquery
Bajé el demo y no funciona
¿debo bajar el jqyuery?
Entre a tu demo y me parecio magnifico.
¿Donde hay un tutorial para implementar lo que tienes al llenar un "Nuevo trabajo"? El que agrega renglones.
Felicidades, muy util.
Simplemente… Excelente!!!
Simple y limpia la solucion gracias!!
Excelente aporte!!!
Se agradece
Saludos!!!!!!!!!!