使用JQuery在GridView ASP.NET中选择所有CheckBoxes

Question

我的Gridview模板列中有checkBoxes,名为"Category A"和"Category B".我想要Select-All功能,即当用户检查A类列中的Select-All复选框时,必须在该列下检查所有复选框.类别B也是如此.我正在尝试使用下面的代码.我的代码的问题是,它选择整个gridview中的所有复选框,"Category A"以及"Category B"复选框.但是,我只希望在同一列下选中复选框.

 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

这是基于Ashish Patil提出的解决方案,当未选中网格行中的任何复选框时,对标题行中的复选框进行一些修改.

在GridView中创建模板列:

<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脚本,把它放在$(document).ready中,例如:

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