jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#

Category > ASP.NET || Published on : Thursday, January 28, 2016 || Views: 11552 || 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