ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

  这章内容比较简单,直接上页面代码:

  

复制代码 代码如下:

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe6.aspx.cs" Inherits="Recipe6" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

  <title>Recipe6</title>

  <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

  <script type="text/javascript">

  $(function () {

  $("#<%=chkSelectAll.ClientID %>").click(function () {

  // 很简单,一行代码搞定

  $("#<%=chkList.ClientID %> input[type=checkbox]").attr("checked", $("#<%=chkSelectAll.ClientID %>").is(":checked"));

  });

  });

  </script>

  </head>

  <body>

  <form id="form1" runat="server">

  <div align="left">

  <p>

  实现全选或全取消操作</p>

  <fieldset style="width: 400px; height: 150px;">

  <asp:CheckBox ID="chkSelectAll" runat="server" Text="全选" />

  <hr />

  <asp:CheckBoxList ID="chkList" runat="server">

  <asp:ListItem Value="1" Text="C#"></asp:ListItem>

  <asp:ListItem Value="2" Text="Java"></asp:ListItem>

  <asp:ListItem Value="3" Text="C++"></asp:ListItem>

  <asp:ListItem Value="4" Text="JavaScript"></asp:ListItem>

  </asp:CheckBoxList>

  </fieldset>

  </div>

  </form>

  </body>

  </html>

  

  效果图:

ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)