Etiquetas

, , ,

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>

&nbsp;<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í.