Lo que vamos hacer en esta oportunidad es seleccionar todos los chekbox de un CheckBoxList al chequear otro checkbox y a la vez deschequear el chekbox cuando se deselecciono alguno del CheckBoxList.
El código es el siguiente.
<body>
<form id=”form1″ runat=”server”>
<div>
<table cellpadding=”2″ cellspacing=”2″ width=”50%”>
<tr>
<th align=”left” style=”font-family:Arial;”>
<h3>
Seleccion de CheckBox con JQuery</h3>
</th>
</tr>
<tr>
<td>
<asp:CheckBox ID=”chkSeleccionarTodos” runat=”server” Text=”Select All” Font-Size=”9pt” Font-Names=”Arial” />
</td>
</tr>
<tr>
<td>
<asp:CheckBoxList ID=”ChkLista” runat=”server” Width=”200px” Font-Size=”9pt” Font-Names=”Arial” BorderStyle=”Solid” BorderColor=”Black” BorderWidth=”1px”>
<asp:ListItem Text =”Check 1″ Value =”1″></asp:ListItem>
<asp:ListItem Text =”Check 2″ Value =”2″></asp:ListItem>
<asp:ListItem Text =”Check 3″ Value =”3″></asp:ListItem>
<asp:ListItem Text =”Check 4″ Value =”4″></asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
</table>
</div>
</form>
</body>
El código JQuery:
<script src=”Scripts/jquery-1.3.2.js” type =”text/javascript” ></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#<%=chkSeleccionarTodos.ClientID %>”).click(function () {
$(“#<%= ChkLista.ClientID %> input:checkbox”).attr(‘checked’, this.checked);
});
$(“#<%=ChkLista.ClientID %> input:checkbox”).click(function () {
if ($(“#<%= chkSeleccionarTodos.ClientID %>”).attr(‘checked’) == true && this.checked == false)
$(“#<%= chkSeleccionarTodos.ClientID %>”).attr(‘checked’, false);
if (this.checked == true)
CheckSelectAll();
});
function CheckSelectAll() {
var flag = true;
$(“#<%=ChkLista.ClientID %> input:checkbox”).each(function () {
if (this.checked == false)
flag = false;
});
$(“#<%= chkSeleccionarTodos.ClientID %>”).attr(‘checked’, flag);
}
});
</script>
El código completo lo pueden descargar de aquí.
