In this article I will explain with an example, how to implement check uncheck all (select unselect all) CheckBoxes functionality in ASP.Net DataList control using JavaScript and jQuery.
When the header Checkbox is checked (selected), all the CheckBoxes in DataList will be checked (selected) and vice versa. When any CheckBox in DataList is unchecked (unselected), the header Checkbox is also unchecked (unselected).
HTML Markup
The HTML Markup consists of an ASP.Net CheckBox and a DataList. The ItemTemplate element of the DataList consists of an HTML Table with a CheckBox in its Header row.
<asp:CheckBox ID = "chkHeader" runat="server" Text = "Select All" />
<hr />
<asp:DataList ID="dlCustomers" runat="server" RepeatColumns="2" CellPadding = "5">
<ItemTemplate>
<table class = "table" border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan = "3" align = "left">
<asp:CheckBox ID="chkRow" runat="server" Font-Bold = "true" Text = '<%# Eval("Name")%>' />
</th>
</tr>
<tr>
<td>Customer Id</td>
<td><%#Eval("Id")%></td>
</tr>
<tr>
<td>Country</td>
<td><%#Eval("Country")%> </td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Namespaces
You will need to import the following namespaces.
C#
VB.Net
Binding the DataList control
The DataList 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[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
dlCustomers.DataSource = dt;
dlCustomers.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(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
dlCustomers.DataSource = dt
dlCustomers.DataBind()
End If
End Sub
Check Uncheck all (Select all) CheckBoxes in ASP.Net DataList using JavaScript and jQuery
Inside the jQuery document ready event handler, the Header and DataList 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 DataList CheckBoxes are checked (selected) and vice versa.
When any DataList CheckBox is clicked, a check is performed to determine whether the count of DataList CheckBoxes equals count of checked DataList 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 () {
$("[id*=chkHeader]").click(function () {
if ($(this).is(":checked")) {
$("[id*=dlCustomers] [id*=chkRow]").attr("checked", "checked");
} else {
$("[id*=dlCustomers] [id*=chkRow]").removeAttr("checked");
}
});
$("[id*=dlCustomers] [id*=chkRow]").click(function () {
if ($("[id*=dlCustomers] [id*=chkRow]").length == $("[id*=dlCustomers] [id*=chkRow]:checked").length) {
$("[id*=chkHeader]").attr("checked", "checked");
} else {
$("[id*=chkHeader]").removeAttr("checked");
}
});
});
</script>
Screenshot
![Check Uncheck all (Select all) CheckBoxes in ASP.Net DataList using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
