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