Germán Ferrari

Cuando desarrollamos aplicaciones web, la funcionalidad es un aspecto muy importante. El usuario no tiene ni quiere perder el tiempo y cada click innecesario es un punto en contra hacia nosotros, los desarrolladores.

La edición por lote es un complemento muy funcional. Imagino que muchos de ustedes usan WordPress, piensen qué molesta sería la tarea de tener que borrar una cantidad considerada de comentarios si no pudieran seleccionar todos con un solo click para luego borrarlos, marcarlos como spam, etc.

Y eso es precisamente lo que vamos a construir: un listado de checkboxs con uno “padre” que será el encargado de seleccionar o deseleccionar todos. Para que se aprecie mejor, en el ejemplo simulé la edición masiva de comentarios de un panel de administración.

Estructura HTML

<table>
    <thead>
        <tr>
            <th><input name="checktodos" type="checkbox" /></th>
            <th>ID</th>
            <th>Nombre</th>
            <th>Comentario</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input name="comment-1" type="checkbox" /></td>
            <td>1</td>
            <td>Juan Perez</td>
            <td>Texto de comentario</td>
        </tr>
        <tr>
            <td><input name="comment-2" type="checkbox" /></td>
            <td>2</td>
            <td>Juan Perez</td>
            <td>Texto de comentario</td>
    	</tr>
    </tbody>
</table>

Del código anterior nos tenemos que concentrar en el <input name="checktodos" type="checkbox" />. Este checkbox servirá para controlar los demás. Lo más importante aquí es el atributo name="checktodos", dato que utilizaremos como referencia al escribir nuestro código jQuery.

Además, tenemos los otros checkboxs que seguramente iremos generando de forma dinámica, lo más seguro es que utilicen un for o while, pero eso no lo vamos a profundizar en este tutorial.

Código jQuery para el control de los checkboxs

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//Checkbox
	$("input[name=checktodos]").change(function(){
		$('input[type=checkbox]').each( function() {			
			if($("input[name=checktodos]:checked").length == 1){
				this.checked = true;
			} else {
				this.checked = false;
			}
		});
	});
 
});
</script>

En la primer línea llamamos a la librería jQuery alojada en el servidor de Google, luego con un $(document).ready(function(){ decimos que cuando el documento esté listo, realice lo que sigue.

$("input[name=checktodos]").change(function(){

Empezamos diciendo que cuando el input (en este caso, de tipo checkbox) que contenga “checktodos” en su atributo name cambie (change()) ejecute una función.

$('input[type=checkbox]').each( function() {

Ahora lo que decimos es que por cada uno (each()) de los checkboxs ejecute otra función.

if($("input[name=checktodos]:checked").length == 1){
		this.checked = true;
	} else {
		this.checked = false;
	}

Los checkboxs devuelven un booleano, es decir, un 1 (si es “verdadero” y el checkbox está activo) o un 0 (“falso”, checkbox deseleccionado). Entonces lo que preguntamos en el if es:

“Si el checkbox padre (de name checktodos) que está seleccionado es igual a 1, entonces a this (el checkbox que estamos recorriendo por el each) lo seleccionamos (this.checked = true;), sino lo deseleccionamos (this.checked = false;).”

De esta manera abarcamos todas las posibilidades:

Sí al hacer click en “checktodos” mientras…

1. No está seleccionado y todos los demás tampoco, entonces selecciona todos.
2. No está seleccionado y los demás algunos si algunos no, entonces selecciona todos.
3. No está seleccionado y todos los demás si, entonces selecciona todos.
4. Si está seleccionado y todos los demás no, entonces selecciona ninguno.
5. Si está seleccionado y los demás algunos si algunos no, entonces selecciona ninguno.
6. Si está seleccionado y todos los demás también, entonces selecciona ninguno.

Un buen ejercicio para terminar de entender esto es abrir el demo en una nueva pestaña y realizar cada ejemplo, luego volver al if y analizarlo.

Si quedan dudas, no duden en preguntar!