Select All CheckBoxes in GridView ASP.NET using JQuery

I have checkBoxes in my Gridview templete columns called "Category A" and "Category B". I want Select-All functionality, i.e. when the user checks the Select-All check Box in category A column, all the checkboxes must get checked under that column. Same for Category B. I am trying with the code below. The problem with my code is, it selects all the check boxes in the entire gridview, "Category A" as well as "Category B"s checkboxes. But, I want only checkboxes selected under the same column.

 function SelectAllCheckboxesA(chk) {
                $('#<%=gvSurveys.ClientID %>').find("input:checkbox").each(function() {
                    if (this != chk) {
                        if ($(this).hasClass('CatA') != false) {
                            this.checked = chk.checked;
                        }
                    }
                    else {
                        alert($(this));
                    }
                });
            }




 <asp:GridView ID="gvSurveys" runat="server" AutoGenerateColumns="false" AllowSorting="True" Width="1500px">
                           <Columns>
                              <asp:TemplateField>
                                 <HeaderTemplate>Category A
    <asp:CheckBox ID="chkSelectAllCatA" runat="server" Visible="false" onclick="javascript:SelectAllCheckboxesA(this);" CssClass="SACatA" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="chkCatA" runat="server" Enabled="false" CssClass="CatA"  />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <HeaderTemplate>
    Category B
    <asp:CheckBox ID="chkSelectAllCatB" runat="server" Visible="false" CssClass="CatB" onclick="javascript:SelectAllCheckboxesB(this);" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="chkCatB" runat="server" Enabled=开发者_如何学C"false" />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

This is based on solution proposed by Ashish Patil with some modifications to clear checkbox in the header row when any of the checkboxes in grid rows is unchecked.

In GridView create a template column:

<asp:templatefield>
<headertemplate>
  <asp:CheckBox ID="chkSelectAll" cssclass="chkHeader" runat="server" />
</headertemplate>
<itemtemplate>
  <asp:CheckBox ID="chkSelect" cssclass="chkItem" runat="server"/>
</itemtemplate>
</asp:templatefield>

jquery script, put it in $(document).ready for example:

var headerChk = $(".chkHeader input");
var itemChk = $(".chkItem input");

headerChk.click(function () { 
 itemChk.each(function () { 
  this.checked = headerChk[0].checked; }) 
});

itemChk.each(function () {
  $(this).click(function () {
    if (this.checked == false) { headerChk[0].checked = false; }
  })
});

Why don't you select only the Checkboxes of CategoryA:

$('#<%=gvSurveys.ClientID %>').find("input:checkbox[Id*=chkCatA]")

Would that work?

Change the selectAll checkboxes to have the same class. Then extract the class from the checkbox and use it as part of the selector, filtering out the select. This will simplify things a lot since you know that all the matched inputs will simply need to get the checked value from the parameter.

function SelectAllCheckboxesA(chk) {
    var $chk = $(chk);
    var myClass = $chk.attr('class');
    $('#<%=gvSurveys.ClientID %>')
       .find("input." + myClass + ":checkbox" )
       .not($chk)
       .attr('checked', $chk.attr('checked') );  
}

$('#<%=gvSurveys.ClientID %>').find('input[Id*="chkCatA"]:checkbox').each(function() {
            if (this != chk) {
                this.checked = chk.checked;
            }
        });

Create the row with a checkbox in the header:

<asp:TemplateField HeaderText="Merged Client">
                <HeaderTemplate>
                   <asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" OnCheckedChanged="chkboxSelectAll_CheckedChanged" ></asp:CheckBox> Merged Client
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckMergedClient" **runat="server"** **onclick="CheckChanged()" OnCheckedChanged="CheckMergedClient_CheckedChanged"** **AutoPostBack="true"** value='<%# Eval("ClientId") %>'/>                                 </ItemTemplate>
</asp:TemplateField>

In code behind add the OnCheckChanged event handler to select or deselect all :

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox ChkBoxHeader = (CheckBox)ClientMatchGridView.HeaderRow.FindControl("chkboxSelectAll");
        foreach (GridViewRow row in ClientMatchGridView.Rows)
        {
            CheckBox ChkBoxRows = (CheckBox)row.FindControl("CheckMergedClient");
            if (ChkBoxHeader.Checked == true)
            {
                ChkBoxRows.Checked = true;
            }
            else
            {
                ChkBoxRows.Checked = false;
            }
        }
    }