Jquery check all CheckBox

Hacía ya tiempo que no dedicaba ni un solo minuto a preparar una entrada para el blog, pero hoy me he plantado y le voy a dedicar un poco para solucionar una de las dudas que suelen salir en los foros de MMSDN.

Como seleccionar todos los checkBox de un DataList o un GridView, esto que puede parecer muy sencillo se nos puede complicar bastante si utilizamos directamente JavaScript, pero con JQuery solo necesitaremos una línea de código Si, solo una línea de código”.

Supongo que a estas alturas la gran mayoría ya conoce que es el la librería Jquery y las ventajas que nos ofrece al escribir nuestro código de cliente y sobre todo porque ahora nos permite tener inteligencie, sumando más potencia a esta productiva librería que os la podéis bajar desdehttp://jquery.com .

Lo primero que voy a hacer es crear una lista para enlazar los datos en el Datalist. No voy a entra en la mejor forma de crear datos ni validarlos simplemente utilizaré un tipo anónimo para realizar el ejemplo lo más simple y rápido posible ;-).

El control en la página estará configurado de la siguiente manera:

protectedvoid Page_Load(object sender, EventArgs e)
{
   if(!IsPostBack)
   {
      var Item = new { Key = 1, Value = "Coche" };
      var Lista = (new[] { Item }).ToList();
      Lista.Add(new { Key = 2, Value = "Moto" });
      Lista.Add(new { Key = 3, Value = "Avión" });

      DataList1.DataSource = Lista;
      DataList1.DataBind();
   }
}

Un checkBox en la cabecera para seleccionar todos los registros y cada ítem contará con otro checBox para seleccionar cada registro. Luego tendremos un botón para mostrar desde el servidor que registros tenemos seleccionados en la lista. 

Luego añadiré el evento onclick al checkBox de la cabecera, para que lance un evento JavaScript y seleccione todos los del control

protectedvoid DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Header)
    {
       CheckBox chk = (CheckBox)e.Item.FindControl("chkAll");
       if (chk != null)
         chk.Attributes.Add("onclick","SelectAll('"+DataList1
            .ClientID+"', this);");
    }
}

A esta función javascript le pasaremos dos parámetros, el identificador de la lista a recorrer y el checkBox que lanza el evento.

Finalmente el código script con JQuery que marcara todos los checkbox:

// Archivo JScript
/// <reference path=jquery.intellisense.js"/>"  

function SelectAll( tb, chk ) {
    var check = chk.checked;
    $("#" + tb + " tr td :checkbox").each(function(){
        this.checked = check;
    });
}

Como podéis comprobar jQuery es muy potente, tan sólo con el identificador de la lista podemos buscar todos los checkbox que hay en las rows y luego con un each modificar el estado igualándolo al del checkbox que ha lanzado el evento. En el ejemplo he utilizado un Datalist y en GridView para que veais que se puede hacer con cualquier control.

Espero que os sea útil este ejemplo.
Saludos.