Select All CheckBoxes in GridView ASP.NET using JQuery

Question

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="false" />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

Answer 1

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

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

Would that work?

Answer 2

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') );  
}