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

Posted 2023-03-05

【中文标题】使用 JQuery 在 GridView ASP.NET 中选择所有复选框

【英文标题】：Select All CheckBoxes in GridView ASP.NET using JQuery

【发布时间】：2011-02-20 21:51:08

【问题描述】：

我的 Gridview 模板列中有名为“A 类”和“B 类”的复选框。 我想要全选功能，即当用户选中 A 类列中的全选复选框时，必须在该列下选中所有复选框。 B类也一样。 我正在尝试使用下面的代码。我的代码的问题是，它选中了整个网格视图中的所有复选框，“A 类”以及“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>

【问题讨论】：

为了小狗的爱，请正确格式化您的代码（并接受一些答案）。

@ROMAN - 只有 4 个符合条件的问题和 16 个代表点。您可能想放他一马，然后指出系统是如何工作的。

@tvanfosson：注册用户3个月。常见问题解答是有原因的。

【参考方案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; 
  )
);

【参考方案2】：

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

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

这行得通吗？

【讨论】：

因为他将CatA 类添加到复选框中，所以类选择器也可以工作（并且看起来更简单）。

不，这没有帮助。我试图特别提到“input:checkbox[Id*=chkCatA]”。

【参考方案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') );  

【讨论】：

您好，谢谢您的回复。这具有相同的效果，所有复选框都在整个 Gridview 中被选中。

@dexter - 那么你的代码有问题。如果标题中的复选框具有不同的类（彼此）并且这些类与列中的类匹配，则应该可以。选择器是特定于类的，不会选择任何没有该类的复选框。

【参考方案4】：

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

【参考方案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;