18Jul 2009 20 Comments */?>

Como seleccionar / deseleccionar todos los checkbox con JQuery

Categorías: JQuery, Tutoriales - Tags:

Les 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).

checkall

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.

Ver ejemplo online
Descargar Ejemplo

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • sdarknot

    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!!

  • Carlos

    Excelente, es exactamente lo que necesitaba, muchas gracias!! me funcionó de maravilla =)

  • Jordi

    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".

  • david

    excelente!!! funciona de maravilla

    gracias! 8D

  • Peddro

    Orale, muy buen post, yo ando haciendo pininos con esto y me a servido de mucho. Gracias!

  • Diego

    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

  • Pingback: JQuery Playground con Test it Yourself | Timersys()

  • Esteban Moreno

    Muchisimas gracias opr compartir.

  • pedro

    gracias por el codigo lo habia visto en javascript pero no en jquery 😀

  • bier

    Bajé el demo y no funciona
    ¿debo bajar el jqyuery?

  • bier

    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.

  • Fabian

    Simplemente… Excelente!!!

  • Ameser

    Simple y limpia la solucion gracias!!

  • Max

    Excelente aporte!!!
    Se agradece
    Saludos!!!!!!!!!!

  • Buen código simple y bien explicado. Funciona!

  • Martinjbc

    a mi me funciono pero con una ligera variante muchas gracias

    function checkTodos (id,pID) {    $( “input[name^='” + pID + “‘]:checkbox”).attr(‘checked’, $(‘#’ + id).is(‘:checked’));      }

  • Hfiguer

      $(“#tbNivel tbody tr”).each(function (index) {
                        var campo1, campo2, campo3;
                        
                        if ($(this).children(“td:eq(0)”).find(‘input[type=checkbox]’).attr(“checked”)==”checked” )
                        {
                         
                            $(this).children(“td:eq(0)”).find(‘input[type=checkbox]’).removeAttr(“checked”)
                        }else{
                            $(this).children(“td:eq(0)”).find(‘input[type=checkbox]’).attr(“checked”, “checked”)
                        }
                    });

  • Ezquiaga

    Muy bueno, te consulto como abrir el documento con la casilla chequeada