[jQuery] Trabajando con el CheckBoxList de ASP.NET

Posted on


Hola, en este post quiero mostrarles como utilizando jQuery podemos trabajar con controles de ASP.NET, para este caso vamos a trabajar con el control CheckBoxList el cual muestra una lista de opciones de las cuales es posible seleccionar una o más opciones. La idea es realizar tres operaciones sobre el control:

  1. Seleccionar todas las opciones
  2. Desmarcar (para no decir deseleccionar jaja) todas las opciones.
  3. Obtener las opciones seleccionadas.

Lo primero que necesitamos es tres linkbutton para cada una de las opciones, el checkboxlist y un div para mostrar las opciones seleccionadas:

   1:  <asp:LinkButton ID="lbtnTodos" runat="server" Text="Seleccionar todos"></asp:LinkButton> |
   2:  <asp:LinkButton ID="lbtnEliminar" runat="server" Text="Eliminar todos"></asp:LinkButton> |
   3:  <asp:LinkButton ID="lbtnLeer" runat="server" Text="Leer selección"></asp:LinkButton>
   4:  <asp:CheckBoxList ID="chklOpciones" runat="server" RepeatColumns="2">
   5:      <asp:ListItem Text="Opción 1" Value="1"></asp:ListItem>
   6:      <asp:ListItem Text="Opción 2" Value="2"></asp:ListItem>
   7:      <asp:ListItem Text="Opción 3" Value="3"></asp:ListItem>
   8:      <asp:ListItem Text="Opción 4" Value="4"></asp:ListItem>
   9:      <asp:ListItem Text="Opción 5" Value="5"></asp:ListItem>
  10:      <asp:ListItem Text="Opción 6" Value="6"></asp:ListItem>
  11:      <asp:ListItem Text="Opción 7" Value="7"></asp:ListItem>
  12:      <asp:ListItem Text="Opción 8" Value="8"></asp:ListItem>
  13:      <asp:ListItem Text="Opción 9" Value="9"></asp:ListItem>
  14:      <asp:ListItem Text="Opción 10" Value="10"></asp:ListItem>
  15:  </asp:CheckBoxList>
  16:  <div id="divSeleccion"></div>

Ahora con jQuery vamos a manejar el evento click de cada linkbutton creado, entonces:

1. Seleccionar todos:

   1:  $("#<% = lbtnTodos.ClientID %>").click(function (e) {
   2:      $("#<% = chklOpciones.ClientID %> input:checkbox").attr('checked', true);
   3:      e.preventDefault();
   4:  });

Lo que hacemos es en la línea 1 manejamos el evento click del linkbutton, y en la función definimos una variable e, en la línea 2 creamos un selector que seleccione todos los controles (input) de tipo checkbox y que al atributo checked le asigne le valor de true, es decir seleccionado.

2. Eliminar todos:

   1:   $("#<% = lbtnEliminar.ClientID %>").click(function (e) {
   2:      $("#<% = chklOpciones.ClientID %> input:checkbox").attr('checked', false);
   3:      e.preventDefault();
   4:  });

Lo que hacemos es en la línea 1 manejamos el evento click del linkbutton, y en la función definimos una variable e, en la línea 2 creamos un selector que seleccione todos los controles (input) de tipo checkbox y que al atributo checked le asgine le valor de false, es decir desmarcado.

3. Leer selección:

   1:  $("#<% = lbtnLeer.ClientID %>").click(function (e) {
   2:      $("#divSeleccion").empty();
   3:      $("#<% = chklOpciones.ClientID %> input:checkbox[checked=true]").each(function () {
   4:          $("#divSeleccion").append('<p>' + $(this).next().text() + '</p>');
   5:      });
   6:      e.preventDefault();
   7:  });

En la línea 2 limpiamos el contenido del div que va a mostrar las opciones escogidas, en la línea 3 le agregamos un filtro al selector [checked:true] para filtrar solo los checkbox que en su atributo checked tiene el valor true, es decir esta seleccionado, y finalmente en la línea 4 mostramos el texto en el div, verán que hago uso de next().text(), esto porque cuando se renderiza el checkboxlist por cada opción se crea un checkbox (solo el recuadro) y un label con el texto, así al decirle next() tomo el siguiente elemento luego de cada checkbox (en este caso el label) y con el .text() obtengo su texto.

En los tres casos se hace uso de e.preventDefault() para evitar el comportamiento por defecto del control el cual causaría un postback en la página.

Espero les sea interesante, les dejo el ejemplo:

Descarga el ejemplo!

5 comentarios sobre “[jQuery] Trabajando con el CheckBoxList de ASP.NET

    Juan escribió:
    06/22/2012 en 15:06

    Hola, muchas gracias por publicar tu ejemplo. Estoy intentando hacer algo similar, pero que solo permita seleccionar 1 solo casillero. Que si o si esté seleccionado 1 y que no pueda seleccionar más de 1. Cualquier ayuda te agradecería!.

      Julio Avellaneda respondido:
      06/25/2012 en 08:02

      Hola, si solo quieres seleciconar 1 única opción en ese caso deberias es usar el control radiobuttonlist, ese solo te permite seleccionar 1 sola opción.

      Saludos

    Magnus Alexander escribió:
    08/03/2012 en 09:18

    Muchas gracias por el tuto, ya tenía un script para hacer un check all a una checkboxlist pero no me funcionaba como yo quería, pero ya funcionó gracias a una parte de su código, me quedó así, es que tenía dos grupos de check box y solo quería seleccionar uno, pero al estar en una content page, no puedo usar el selector de ID que ustedes ponen arriba entonces uso uno diferente

    $(document).ready(function () {
    $(‘[id$=chkUsersAll]’).click(
    function () {
    $(“[id$=chkUsersList] input:checkbox”).attr(‘checked’, $(‘[id$=chkUsersAll]’).is(‘:checked’));
    });
    $(‘[id$=chkClientAll]’).click(
    function () {
    $(“[id$=chkClientsList] input:checkbox”).attr(‘checked’, $(‘[id$=chkClientAll]’).is(‘:checked’));
    });
    });

      Julio Avellaneda respondido:
      08/03/2012 en 14:27

      hola, que bueno q te haya sido de.utilidad, si el tema cambia un poco con los id cuando se tienen contenedores

    Home.A escribió:
    01/08/2013 en 07:30

    It is that slightly creepy, Barbie doll whose legs sit inside the roll of toilet
    paper, her usually crocheted skirt hiding the spare TP roll.
    Pets as presents seem like a great idea, but the logistics
    of owning a pet came be very tricky. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s