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

Answer 2

为什么不选择CategoryA的复选框：

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

那会有用吗？

Answer 3

将selectAll复选框更改为具有相同的类。然后从复选框中提取类并将其用作选择器的一部分，过滤掉选择。这将简化很多事情，因为您知道所有匹配的输入只需要从参数中获取检查值。

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

Answer 4

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

Answer 5

使用标题中的复选框创建行：

<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>

在代码后面添加OnCheckChanged事件处理程序以选择或取消全选：

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

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

5 个答案: