Select All CheckBoxes in GridView ASP.NET using JQuery
- by dexter
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>
