jQuery check uncheck all checkboxes in GridView or Repeater

This article helps you to check or uncheck all checkboxes which are in ASP.NET GridView or Repeater control.

For this tutorial we will use jQuery functions to catch header Checkbox click event and if header checkbox is checked then all ItemTemplate checkbox will get checked and if header is not checked then all other ItemTemplate will be unchecked.

Create GridView / Repeater Control and bind data

Go through Repeater control with custom paging which creates a Repeater control, read data from Northwind database Customer table. We will add Header and ItemTemplate checkbox to this repeater. If you do not want to use Repeater you can use ASP.NET GridView. You can also try with jQuery AutoComplete TextBox to find customers from specific country.

DataRepeater with custom paging


Add HeaderTemplate and ItemTemplate Checkbox in GridView / Repeater control

Open solution created in previous step and open Customers.aspx page. Add CheckBox chkCheckAll to repCustomers GridView / Repeater control. Checking or unchecking this checkbox will change the ItemTemplate check box status.

Add ASP.NET CheckBox control to Repeater repCustomers's ItemTemplate.

Your HTML for Repeater will look like this.


<asp:Repeater ID="repCustomers" runat="server" 
    EnableViewState="false">
<HeaderTemplate>
    <table>
        <tr>
            <th>
                <asp:CheckBox ID="chkCheckAll" runat="server" 
                        CssClass="chkHeader" />   
            </th>
            <th>
                CustomerID
            </th>
            <%-- other column fields--%> 
        </tr>                       
</HeaderTemplate>
<ItemTemplate>
    <tr>
        <td>
            <asp:CheckBox ID="chkCustomer" runat="server" 
                    CssClass="chkItem"  />  
        </td>
        <td>
            <%# ((NorthwindApp.Customer)Container.DataItem).CustomerID %>
        </td>
        <%-- other column fields--%>
    </tr>
</ItemTemplate>            
</asp:Repeater>
    
            

jQuery function for check or uncheck all

Create new JavaScript file with name Customer.js. Write a function which will catch chkCheckAll click event. It will do the necessary check / uncheck operation depending on chkCheckAll status.

Below jQuery function will evaluate chkCheckAll and if its checked then other ItemTemplate CheckBoxes will be checked.


$(document).ready(function () {
$('#MainContent_repCustomers_chkCheckAll').click(function () {
    if ($(this).is(':checked')) {
        $("div#customer table tbody tr td 
            input:[type='checkbox']:not(:checked)").each(function () {
            $(this).attr('checked', true);
        });
    }
    else {
            
        $("div#customer table tbody tr td 
                input:[type='checkbox']:checked").each(function () {
            $(this).attr('checked', false); 
        });
    }
});
}); 
    
            

Check / uncheck all by using CssClass: As we have set CssClass property to Header and ItemTemplate checkboxes. We can use jQuery selectors to select controls and check / uncheck all ItemTemplate checkboxes.

Below jQuery function select CheckBox control with CssClass chkHeader and if it is checked then selects all CheckBox with CssClass chkItem else it will make all CheckBoxes uncheck.


$(document).ready(function () {
    $('.chkHeader input').click(function () {
    $(".chkItem input").each(function () {
        $(this).attr('checked', $('.chkHeader input').attr('checked'));
    });
    });
});
    
   

Add Reference to JavaScript File

Your Customers.js file is ready. Open Site.Master file and below reference to JavaScript file.


<script src="Scripts/jquery-1.4.1.min.js"
            type="text/javascript"></script> 
<script src="Scripts/Customer.js" 
        type="text/javascript"></script>   

    

Check Uncheck All Checkboxes of Gridview / Repeater

Download source code

Speak your mind :
Leave a comment for this article on dotnetbloogers.com