Category >
ASP.NET
|| Published on :
Thursday, January 28, 2016 || Views:
12654
||
jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C# jQuery to Check UnCheck All CheckBoxes
Introduction
Here Pawan Kumar will explain how to jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#
Description
In previous post I have explained
How to add current copyright year in ASP.NET,
How to avoid a form from double submission using asp.net,
Set max length of MultiLine TextBox in ASP.Net,
Allow only alphabets in a textbox using javascript in asp.net,
jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event,
Create a QR Code with a Logo in ASP.Net C#, and many more articles.
Now I will explain How to jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#
So follow the steps to learn jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#
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.
Step 1:Create a aspx web page using the below codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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: Blue; color: #FFFFFF; height: 30px;">
<td style="width: 20px;">
S.No
</td>
<td style="text-align: center;">
<input type="checkbox" id="chkHeader" class="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" />
</td>
<td>
<%#Eval("EmployeeName") %>
</td>
<td>
<%#Eval("EmployeeCode") %>
</td>
<td>
<%#Eval("Age") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
Step 2: Write the following codes in aspx code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
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 = "Raj", EmployeeCode = "E001", Age =30},
new Employee(){ EmployeeId = 2, EmployeeName = "Shahrukh", EmployeeCode = "E002", Age =45},
new Employee(){ EmployeeId = 3, EmployeeName = "Shahid", EmployeeCode = "E003", Age =23},
new Employee(){ EmployeeId = 4, EmployeeName = "Salman", EmployeeCode = "E004", Age =49},
new Employee(){ EmployeeId = 5, EmployeeName = "Hrithik", EmployeeCode = "E005", Age =24}
};
repEmployees.DataSource = employees;
repEmployees.DataBind();
}
}
Conclusion:
So, In this tutorial we have learned, jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#
Download Source Codes