In
this post, I will explain how to select and deselect all checkbox in ASP.Net repeater control using JQuery.
When user will select the checkbox in header row then all checkbox from item row is set to select status and vice versa. Also when user will deselect one of the checkbox from item row then header row checkbox will be set to deselect status.
In below example, the first column consists of an ASP.Net checkbox. A checkbox present in the TH element will be used to select and deselect all checkbox in the TR element of ASP.Net Repeater control.
HTML
Code :
<%@
Page Language="VB" AutoEventWireup="false"
CodeFile="VB.aspx.vb" Inherits="VB" %>
<html lang="">
<head>
<title>Select and deselect all CheckBoxes in ASP.Net reapeater control using jQuery</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
}
table th
{
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
}
table, table table td
{
border: 0px solid #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<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>
<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>
</form>
</body>
</html>
VB.Net
Code :
Protected
Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(3) {
New DataColumn("Id"),
New DataColumn("Name"),
New DataColumn("Country"),
New DataColumn("Salary")
})
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()
End If
End
Sub