Posts Tagged checkbox

Como seleccionar / deseleccionar todos los checkbox con JQuery

Posted on July 18, 2009 by Damian3 Comments

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:

<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

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

VN:F [1.7.0_948]
Rating: 4.0/5 (2 votes cast)

Tags:

Filed Under: JQuery, Tutoriales