Trong bài viết này, tôi sẽ giải thích với một ví dụ, cách thực hiện kiểm tra bỏ chọn tất cả (chọn bỏ chọn tất cả) chức năng CheckBoxes trong điều khiển Bộ lặp ASP.Net sử dụng JavaScript và jQuery.
Khi Hộp kiểm của hàng tiêu đề được chọn (được chọn), tất cả Hộp kiểm của hàng sẽ được chọn (được chọn) và ngược lại. Khi bất kỳ hàng CheckBox nào được bỏ chọn (không được chọn), thì Hộp kiểm của hàng tiêu đề cũng được bỏ chọn (không được chọn)
Cột đầu tiên bao gồm một Hộp kiểm tra ASP.Net. CheckBox hiện diện trong phần tử TH sẽ được sử dụng để kiểm tra bỏ chọn tất cả (chọn bỏ chọn tất cả) CheckBox trong điều khiển Bộ lặp ASP.Net.
<asp:Repeater ID="rptCustomers" runat="server">
<HeaderTemplate>
<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><asp:CheckBox ID="chkHeader" runat="server" /></th>
<th>Customer Id</th>
<th>Customer Name</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td><asp:CheckBox ID="chkRow" runat="server" /></td>
<td><%#Eval("Id")%></td>
<td><%#Eval("Name")%></td>
<td><%#Eval("Country")%> </td>
<td><%#Eval("Salary")%></td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("Salary") });
dt.Rows.Add(1, "John Hammond", "United States", 70000);
dt.Rows.Add(2, "Mudassar Khan", "India", 40000);
dt.Rows.Add(3, "Suzanne Mathews", "France", 30000);
dt.Rows.Add(4, "Robert Schidner", "Russia", 50000);
rptCustomers.DataSource = dt;
rptCustomers.DataBind();
}
}
Bên trong trình xử lý sự kiện sẵn sàng của tài liệu jQuery, Hộp kiểm tiêu đề và Hàng được chỉ định trình xử lý sự kiện Nhấp.
Khi nhấp vào Header CheckBox, việc kiểm tra đầu tiên được thực hiện để xác định xem nó được chọn (được chọn) hay được bỏ chọn (không được chọn). Nếu Hộp kiểm đầu đề được chọn (được chọn), thì tất cả các Hộp kiểm hàng được chọn (được chọn) và ngược lại.
Khi bất kỳ Ô Kiểm tra Hàng nào được nhấp vào, việc kiểm tra được thực hiện để xác định xem số lượng Ô Kiểm tra Hàng có bằng số Ô Kiểm tra Hàng đã kiểm tra hay không. Nếu số lượng bằng nhau thì Header CheckBox được chọn (đã chọn) nếu không nó được bỏ chọn (không được chọn).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#tblCustomers [id*=chkHeader]").click(function () {
if ($(this).is(":checked")) {
$("#tblCustomers [id*=chkRow]").attr("checked", "checked");
} else {
$("#tblCustomers [id*=chkRow]").removeAttr("checked");
}
});
$("#tblCustomers [id*=chkRow]").click(function () {
if ($("#tblCustomers [id*=chkRow]").length == $("#tblCustomers [id*=chkRow]:checked").length) {
$("#tblCustomers [id*=chkHeader]").attr("checked", "checked");
} else {
$("#tblCustomers [id*=chkHeader]").removeAttr("checked");
}
});
});
</script>