ASP.NET GridView CheckBox全选/反选功能实现

ASP.NETGridView控件中,经常需要实现全选和反选的功能。例如,在Gmail或Hotmail中,用户可以通过勾选或取消勾选一个复选框来选择或取消选择列表中的所有记录。本文将介绍如何在ASP.NET的GridView中实现类似的功能。

首先,定义了一个名为Employee的类,并为其添加了一些记录。然后,将这些记录绑定到GridView控件中。

public class Employee { public int Id { get; set; } public string Name { get; set; } public string Address { get; set; } public string Designation { get; set; } } protected void Page_Load(object sender, EventArgs e) { var employees = new List<Employee>() { new Employee() { Id = 1, Name = "Ms. Nancy Davolio", Address = "507 - 20th Ave. E. Apt. 2A", Designation = "Sales Representative" }, // ... 省略其他员工记录 ... }; gvEmployees.DataSource = employees; gvEmployees.DataBind(); }

接下来,定义GridView控件,并在其中添加了复选框。

<asp:GridView ID="gvEmployees" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox runat="server" ID="chkAll" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox runat="server" ID="chkEmployee" /> </ItemTemplate> </asp:TemplateField> // ... 省略其他列 ... </Columns> // ... 省略其他样式 ... </asp:GridView>

有两个需求:

  1. 当顶部的复选框被勾选或取消勾选时,列表中的所有复选框也应该相应地被勾选或取消勾选。
  2. 当列表中的任何一个复选框被勾选或取消勾选时,顶部的复选框也应该自动地被勾选或取消勾选。

为了实现这些功能,可以使用JavaScriptjQuery。以下是完整的JavaScript代码:

<script type="text/javascript"> $(document).ready(function () { $("input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded); $("input[id*='chkAll']:checkbox").click(function () { if ($(this).is(":checked")) { $("input[id*='chkEmployee']:checkbox").attr("checked", true); } else { $("input[id*='chkEmployee']:checkbox").attr("checked", false); } }); }); function CheckUncheckAllCheckBoxAsNeeded() { var totalCheckboxes = $("input[id*='chkEmployee']:checkbox").size(); var checkedCheckboxes = $("input[id*='chkEmployee']:checkbox:checked").size(); if (totalCheckboxes == checkedCheckboxes) { $("input[id*='chkAll']:checkbox").attr("checked", true); } else { $("input[id*='chkAll']:checkbox").attr("checked", false); } } </script>
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485