jQuery : Select all checkboxes in Grid View

While working with Grid View control one of the most common scenarios encountered is that select all child checkboxes.

Here I would like to share a quick and really easy code snippet that I have written in jQuery.

Let’s start with Grid View code below, here key points are

1) Id of <HeaderTemplate> checkbox.           id="chkParent"

2) CssClass of <ItemTemplate> checkbox.      CssClass="chkChild"

<asp:GridView ID="gvMemberBuddies" runat="server"  AutoGenerateColumns="false" CellPadding="2" CellSpacing="0" 
Width="100%">
  <Columns>
     <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="50px" >
         <HeaderTemplate>
             <input id="chkParent" name="chkParent" type="checkbox">
         </HeaderTemplate>
         <ItemTemplate>
              <asp:CheckBox ID="chkMember" runat="server" CssClass="chkChild" />
         </ItemTemplate>
         <ItemStyle VerticalAlign="top" />
         <HeaderStyle VerticalAlign="middle" />
         </asp:TemplateField>
       <asp:BoundField DataField="BuddyName" HeaderStyle-HorizontalAlign="Left" HeaderText="Buddy Name" />
  </Columns>
</asp:GridView>

Here are the jQuery Functions

$(document).ready(function () {
    $("#chkParent").click(function() {
        SelectAllCheckBoxes(this)
    });

    $(".chkChild").click(function() {
        ToggleParentCheckBox();
    });
});

function SelectAllCheckBoxes(parentChkbox) {
   $(".chkChild").attr('checked', $(parentChkbox).attr('checked'));
}

function ToggleParentCheckBox() {
    var childchkb = $(".chkChild");
    var allchklnt = childchkb.length;
    if (allchklnt > 0) {
        var isChecked = true;
        for (var i = 0; i < allchklnt; i++) {
            if (!childchkb[i].checked){isChecked = false; break;}
        }
        $("#chkParent").attr('checked', isChecked);
    }
}

Try demo below:

	Buddy Name
	Buddy A
	Buddy B
	Buddy C
	Buddy D
	Buddy E