In this article I will explain with an example, how to implement check uncheck all (select unselect all) CheckBoxes functionality in ASP.Net Repeater control using JavaScript and jQuery.
When the header row Checkbox is checked (selected), all the row CheckBoxes will be checked (selected) and vice versa. When any row CheckBox is unchecked (unselected), the header row Checkbox is also unchecked (unselected).
HTML Markup
The HTML Markup consists of an ASP.Net Repeater which is rendered as HTML Table.
The first column consists of an ASP.Net CheckBox. The CheckBox present in the TH element will be used to check uncheck all (select unselect all) CheckBoxes in the ASP.Net Repeater control.
<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>
Namespaces
You will need to import the following namespaces.
C#
VB.Net
Binding the Repeater
The Repeater control is populated using some dummy records using DataTable, you can populate it from database too.
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();
}
}
VB.Net
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")})
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
Check Uncheck all (Select all) CheckBoxes in ASP.Net Repeater using JavaScript and jQuery
Inside the jQuery document ready event handler, the Header and Row CheckBoxes are assigned Click event handlers.
When the Header CheckBox is clicked, first a check is performed to determine whether it is checked (selected) or unchecked (unselected). If the Header CheckBox checked (selected), then all the Row CheckBoxes are checked (selected) and vice versa.
When any Row CheckBox is clicked, a check is performed to determine whether the count of Row CheckBoxes equals count of checked Row CheckBoxes. If the count is equal then the Header CheckBox is checked (selected) else it is unchecked (unselected).
<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>
Screenshot
Demo
Downloads
