Tip: 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 desde  http://jquery.com . 

 

http://geeks.ms/resized-image.ashx/__size/550x0/__key/CommunityServer.Blogs.Components.WeblogFiles/mrubino/checkAll.jpg

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: 

protected void 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.

protected void 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);”);

    }

}

 

Codigo:

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:

 

 Codigo:

// 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.

 

 

5 comentarios en “Tip: Jquery check all CheckBox”

  1. Hola @Marc
    Tengo un post de la misma tematica “jQuery y checkbox”, ademas de “navegacion con teclado” en una grilla.. etc etc
    Asi que me diste pie con el tuyo a publicarlos.
    Luego los referencio.

    Saludos.

  2. Buenas, soy un seguidor constante de tu blog y aprendo mucho con cada publicacion que haces.
    Bueno, hace unos dias tambien necesitaba esta funcionalidad, y me parece muy interesante la manera en como planteas la solución.
    No obstante, la resolvi de la siguiente manera:

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

    …Me funcionó a la perfección, solo es cuestion de modificar el selector.
    Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *