Chequear todos los checkbox de un gridview con javascript

NOTA 16/06/2009: He publicado como hacer esta misma tarea con jQuery en este artículo, recomiendo utilizar esa alternativa por los motivos que comento en dicho artículo.

Muchas veces queremos chequear o deschequear todos los checkbox de un gridview de una sola vez, puede ser cuando el usuario realiza determinada acción en otro control, por ejemplo un botón para “seleccionar todo”, o que cuando se activa un CheckBox en la cabecera de la columna, cambie el estado de todos los checks al de la cabecera.

Si bien esto se puede hacer con código de servidor, normalmente no queremos que se realice un postback solo para esto, la solución es javascript.

(Nuevamente, si solo te interesa un código js que solucione el problema que acabo de describir, te recomiendo ir directamente a copiar los dos fragmentos de javascript al final del post.)

En su momento utilicé el código que Scott Mitchell publicó en este artículo, pero esta solución, si bien funciona y no genera un postback, requiere código de servidor, ya que en la creación de la página se registra mediante el método RegisterArrayDeclaration un array con los ids que tendrá cada checkbox en el cliente, lo que nos obliga a hacerlo en cada postback o a recargar el estado, ya sea ViewState o Session.

Buscando otra alternativa encontré este otro artículo de Mohammad Azam, el autor de GridViewGuy. Este si es un ejemplo totalmente sobre javascript, pero tiene un gran defecto: opera sobre todos los checkbox de la página, sin importar si están dentro de la grilla o no, ni hablar si tenemos dos grillas.

En este punto decidí escribir mi propia solución, o sea una totalmente en el cliente y que permita operar sobre los checkbox de una grilla en particular y, por que no, sobre una columna en particular, de manera que podamos tener más de una columna con checkbox y cambiar el estado de los checks de una de ellas sin afectar la otra.

Un poco de background que pueden saltarse si les parece:

Como incluir CheckBox en una columna de un gridview

Antes que nada hay que generar una columna con los checkbox. Hay dos maneras de hacer esto como cuenta Scott Mitchell en el artículo nombrado, yo utilizo también un TemplateField (no encontré todavía utilidad para los CheckBoxField), de modo que colocando un checkbox en el ItemTemplate genero uno en cada celda del TemplateField:

<asp:TemplateField HeaderText="chk">
   <ItemTemplate>
      <asp:CheckBox ID="chkColumna1" runat="server" />
   </ItemTemplate>
</asp:TemplateField>

Visualmente (en VisualStudio), agregamos un TemplateField al gridview y seleccionamos EditTemplate del menú contextual. Luego arrastramos un CheckBox a la zona ItemTemplate. Para finalizar: End Template Editing, en el menú contextual.

Como chequear todos CheckBox de un GridView

Esta rutina javascript cambia el estado de todos los checkbox de una grilla sin importar su ubicación:

function ChangeAllChecks(gridViewName,newState)
{
   var tabla = document.getElementById(gridViewName);
   celdas = tabla.cells;
   for(i=0;i<celdas.length-1;i++)
   {
   if (celdas[i].firstChild.type=="checkbox"
   && celdas[i].firstChild.checked != newState)
      {
         celdas[i].firstChild.click();
      }
   }
}

Para llamarla utilizamos ChangeAllChecks(‘GridView1′,true); o false si es el caso

Como chequear una columna específica

Puede ocurrir que en un gridview tengamos más de un TemplateField con CheckBox, y que solo queramos chequear o deschequear una sola columna, para ello hice un nuevo método que toma como paramétro el índice de la columna (empezando por 0). (Actualizado 29/09/2008 según respuesta al comentario de Martín)

function ChangeChecksByColumn(gridViewName, newState, columnIndex){
    var tabla = document.getElementById(gridViewName);
    var columnas = tabla.cells.length / tabla.rows.length;
    celdas = tabla.cells;
    for (i = columnas + columnIndex; i < celdas.length; i += columnas){
        if (celdas[i].firstChild.type == "checkbox"
               && celdas[i].firstChild.checked != newState
            /* && agregar aquí otras condiciones */){
            celdas[i].firstChild.click();
        }
    }
}

Como chequear a partir de un CheckBox en la cabecera

El código anterior no es muy útil porque nos solicita el estado (true=checked/false=unchequed) en el que queremos dejar los checkbox, la solución es agregar un checkbox en la cabecera de la TemplateColumn:

y agregamos una rutina que permita identificar el estado del mismo y la columna en que se encuentra, luego llamamos al método anterior: ChangeChecksByColumn:

function CopyCheckStateByColumn(HeaderCheckBox, gridViewName)
{
    var columnIndex = HeaderCheckBox.parentElement.cellIndex;
    var newState = HeaderCheckBox.checked;
    ChangeChecksByColumn(gridViewName, newState, columnIndex);
}

Para terminar, completamos el evento onclick del checkbox con una llamada a CopyCheckStateByColumn pasando como parámetro el propio checkbox y el nombre del gridview:
(lo que sigue cambiado el 08/11 según la respuesta al comentario de Roger)

<asp:TemplateField HeaderText="chk">
<HeaderTemplate>
    <asp:CheckBox ID="chkHeader" runat="server" onclick="javascript:CopyCheckStateByColumn(this,this.offsetParent.offsetParent.id);"/>
</HeaderTemplate>
<ItemTemplate>
    <asp:CheckBox ID="chkTest" runat="server" />
</ItemTemplate>
</asp:TemplateField>

Una precaución: Tener en cuenta que el código javascript consulta si el contenido es un CheckBox mediante la propiedad firstChild para cada objeto de la colección cells del objeto table, o sea: el contenido de cada TD. Si ponemos otro objeto en el ItemTemplate junto con el CheckBox, podemos tener problemas si nos descuidamos.

Un tip: Para llamar métodos javascript en el evento click de un control Button, se debe utilizar el evento OnClientClick en vez de onclick.

Una desventaja: No funciona en Firefox.

Saludos