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:LinkButtonID="lbtnTodos"runat="server"Text="Seleccionar todos">asp:LinkButton> | 2: <asp:LinkButtonID="lbtnEliminar"runat="server"Text="Eliminar todos">asp:LinkButton> | 3: <asp:LinkButtonID="lbtnLeer"runat="server"Text="Leer selección">asp:LinkButton> 4: <asp:CheckBoxListID="chklOpciones"runat="server"RepeatColumns="2"> 5: <asp:ListItemText="Opción 1"Value="1">asp:ListItem> 6: <asp:ListItemText="Opción 2"Value="2">asp:ListItem> 7: <asp:ListItemText="Opción 3"Value="3">asp:ListItem> 8: <asp:ListItemText="Opción 4"Value="4">asp:ListItem> 9: <asp:ListItemText="Opción 5"Value="5">asp:ListItem> 10: <asp:ListItemText="Opción 6"Value="6">asp:ListItem> 11: <asp:ListItemText="Opción 7"Value="7">asp:ListItem> 12: <asp:ListItemText="Opción 8"Value="8">asp:ListItem> 13: <asp:ListItemText="Opción 9"Value="9">asp:ListItem> 14: <asp:ListItemText="Opción 10"Value="10">asp:ListItem> 15: asp:CheckBoxList> 16: <divid="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('

' + $(this).next().text() + '

'
); 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!