Check/Uncheck All Checkboxes in Asp.Net Gridview using jQuery

In this tutorial, we have added following features

• Check/uncheck all child checkbox based on parent checkbox status.
• Update parent checkbox status based on child checkbox.

Add GridView Cotrol :

   <asp:GridView ID="gdRows" runat="server" >
            <Columns>
                <asp:TemplateField HeaderText=" ">
                 <HeaderTemplate>
                   <asp:CheckBox ID="chkParent" runat="server" />                  
                 </HeaderTemplate>                  
                 <ItemTemplate>                      
                   <asp:CheckBox ID="chkSelect" runat="server" />                  
                 </ItemTemplate>              
                </asp:TemplateField>
                <asp:BoundField ShowHeader="true" DataField="ID" HeaderText="ID"></asp:BoundField>
                <asp:BoundField ShowHeader="true" DataField="ProductName" HeaderText="Product Name">
                </asp:BoundField>
                <asp:BoundField ShowHeader="true" DataField="Quantity" HeaderText="Quantity"></asp:BoundField>
                <asp:BoundField ShowHeader="true" DataField="Price" HeaderText="Price"></asp:BoundField>
            </Columns>
        </asp:GridView>

The complete jQuery code is,

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gdRows').find('input:checkbox[id$="chkParent"]').click(function()
{
var isChecked = $(this).prop("checked");
$("#gdRows [id*=chkSelect]:checkbox").prop('checked', isChecked);
});
$('#gdRows').find('input:checkbox[id$="chkSelect"]').click(function()
{
var flag = true;
$("#gdRows [id*=chkSelect]:checkbox").each(function() {
if ($(this).prop("checked") == false)
flag = false;
});
$("#gdRows [id*=chkParent]:checkbox").prop('checked', flag);
});
});
</script>

Demo

Download Complete Source Code