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

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.

Description: Basically I have implemented the following features in repeater using jQuery.
  1. When the parent Select All checkbox in Header is checked, all child checkboxes in the column will get checked automatically.
  2. When the Select All checkbox is unchecked, all checkboxes in the column will get unchecked automatically.
  3. When all the checkboxes in the column is checked, the Select All checkbox in header will get checked automatically.
  4. When any of the checkbox in the column is unchecked, the Select All checkbox will get unchecked automatically.
Implementation: Let’s create a sample page for demonstration purpose.

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 EventArgsHandles 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.        
Previous
Next Post »

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..