Introduction: In this article I am going to explain How to check uncheck or select deselect all checkboxes on click of Select All checkbox in header in Asp.Net Repeater using jQuery.
- When the parent Select All checkbox in Header is checked, all child checkboxes in the column will get checked automatically.
- When the Select All checkbox is unchecked, all checkboxes in the column will get unchecked automatically.
- When all the checkboxes in the column is checked, the Select All checkbox in header will get checked automatically.
- When any of the checkbox in the column is unchecked, the Select All checkbox will get unchecked automatically.
HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chkAll = $('.header').click(function () {
//Check header and item's checboxes on click of header checkbox
chkItem.prop('checked', $(this).is(':checked'));
});
var chkItem = $(".item").click(function () {
//If any of the item's checkbox is unchecked then also uncheck header's checkbox
chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table
border="1" cellspacing="2" cellpadding="2" style="width: 400px;">
<tr style="background-color: #E36C0A; color: #FFFFFF; height: 30px;">
<td style="width:20px;">Sr.No</td>
<td style="text-align: center;">
<input type="checkbox" id="chkHeader" class="header" />
<%-- OR <asp:CheckBox ID="chkHeader" runat="server"
Text="All" CssClass="header" />--%></td>
<td>Employee Name</td>
<td>Code</td>
<td>Age</td>
</tr>
<asp:Repeater
ID="repEmployees" runat="server">
<ItemTemplate>
<tr>
<td style="text-align: center;">
<%#Container.ItemIndex+1 %>
</td>
<td style="text-align: center;">
<input type="checkbox" id="chkItems" class="item" />
<%--OR <asp:CheckBox
ID="chkItems" runat="server" CssClass="item"
/>--%>
</td>
<td>
<%#Eval("EmployeeName") %>
</td>
<td>
<%#Eval("EmployeeCode") %>
</td>
<td>
<%#Eval("Age") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
Asp.Net C# Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindEmployeeData();
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string EmployeeName { get; set; }
public string EmployeeCode { get; set; }
public int Age { get; set; }
}
private void BindEmployeeData()
{
List<Employee> employees = new List<Employee>()
{
new Employee(){ EmployeeId = 1, EmployeeName = "Arjun", EmployeeCode = "EMP001",
Age =22},
new Employee(){ EmployeeId = 2, EmployeeName = "Ranbeer", EmployeeCode = "EMP002",
Age =25},
new Employee(){ EmployeeId = 3, EmployeeName = "Shahid", EmployeeCode = "EMP003",
Age =21},
new Employee(){ EmployeeId = 4, EmployeeName = "Salman", EmployeeCode = "EMP004",
Age =22},
new Employee(){ EmployeeId = 5, EmployeeName = "Hrithik", EmployeeCode = "EMP005",
Age =24}
};
repEmployees.DataSource = employees;
repEmployees.DataBind();
}
Asp.Net VB Code
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindEmployeeData()
End If
End Sub
Public Class Employee
Public Property EmployeeId() As Integer
Get
Return m_EmployeeId
End Get
Set(value As Integer)
m_EmployeeId = Value
End Set
End Property
Private m_EmployeeId As Integer
Public Property EmployeeName() As String
Get
Return m_EmployeeName
End Get
Set(value As String)
m_EmployeeName = Value
End Set
End Property
Private m_EmployeeName As String
Public Property EmployeeCode() As String
Get
Return m_EmployeeCode
End Get
Set(value As String)
m_EmployeeCode = Value
End Set
End Property
Private m_EmployeeCode As String
Public Property Age() As Integer
Get
Return m_Age
End Get
Set(value As Integer)
m_Age = Value
End Set
End Property
Private m_Age As Integer
End Class
Private Sub BindEmployeeData()
Dim employees As New List(Of Employee)() From { _
New Employee()
With { _
Key
.EmployeeId = 1, _
Key
.EmployeeName = "Arjun", _
Key
.EmployeeCode = "EMP001", _
Key
.Age = 22 _
}, _
New Employee()
With { _
Key
.EmployeeId = 2, _
Key
.EmployeeName = "Ranbeer", _
Key
.EmployeeCode = "EMP002", _
Key
.Age = 25 _
}, _
New Employee()
With { _
Key
.EmployeeId = 3, _
Key
.EmployeeName = "Shahid", _
Key
.EmployeeCode = "EMP003", _
Key
.Age = 21 _
}, _
New Employee()
With { _
Key
.EmployeeId = 4, _
Key
.EmployeeName = "Salman", _
Key
.EmployeeCode = "EMP004", _
Key
.Age = 22 _
}, _
New Employee()
With { _
Key
.EmployeeId = 5, _
Key
.EmployeeName = "Hrithik", _
Key
.EmployeeCode = "EMP005", _
Key
.Age = 24 _
} _
}
repEmployees.DataSource = employees
repEmployees.DataBind()
End Sub
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..