Checkear todos los CheckBox con jQuery

Uno de los artículos más consultados de este blog explica como configurar una tabla para que al clickear en un Checkbox en la cabecera de una columna, todos los checks de la misma tomen el mismo estado «checked/unchecked».

Sin embargo, ese código requiere de algunas condiciones:

• La tabla debe poseer un ID.
• Cada checkbox debe ser el primer elemento de la celda.
• Hay que escribir una llamada al evento onclick del checkbox en la cabecera, pasando como parámetro el ID de la tabla, ya sea escribiéndolo o navegando por el DOM para obtenerlo.

Y tiene un grave problema, no funciona en navegadores no-IE.

Cuando empecé a investigar jQuery, quise emular como práctica este código y me encontré con que jQuery nos lleva a plantear una solución mucho mas completa, que no solo resuelve todos los problemas anteriores, si no que nos lleva a escribir en el body la cantidad de javascript: ¡cero!.

Vamos al grano:

Primer paso: Agregar el include del archivo js donde está el código. (aparte del de jQuery por supuesto)

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/miScript.js" type="text/javascript"></script>

Segundo y último paso: En miScript.js el siguiente código:

$(function() {
    $("table th :checkbox").click(function() {
        $(this).closest("table")
            .find("td:nth-child(" + ($(this).closest("th").prevAll().size() + 1) + ") :checkbox")
            .attr("checked", $(this).attr("checked"));
    });
});

Aparte de esto, solo nos queda asegurarnos de que los checkbox de la cabecera estén en un TH y no en un TD.

Ahora ya no nos importa si usamos un GridView, una tabla estática, ni si posee tags THEAD y TBODY o solo TRs, ni si el checkbox es un control de servidor o simple HTML. Todos los checkboxs que tengamos en la cabecera (TH) de una tabla provocarán al cambiar su estado que cambien todos los de la misma columna.

No se a Uds. pero a mi me parece fantástico que solamente incluyendo un tag para jQuery y otro para un .js con el script (que seguramente ya estoy incorporando a nuestras páginas para utilizar otras funciones), tenga el problema resuelto en todas las páginas sin hacer más que olvidarme del tema.

Respecto al código, voy a usarlo como parte de la continuación de mi artículo anterior de introducción a jQuery para los que quieran entenderlo.

Nota: Debido al uso de la (excelente) función closest el código requiere jQuery 1.3+.

Saludos: Alejandro