选中网格视图中的所有复选框答案

【问题标题】：Select all checkboxes in grid view选中网格视图中的所有复选框
【发布时间】：2013-02-21 13:16:47
【问题描述】：

我有以下网格视图 -

<asp:GridView ID="group_table" Runat="server" 
    AutoGenerateColumns="False" onprerender="group_table_PreRender" 
    onrowdatabound="group_table_RowDataBound"
    ClientIDMode="Static"  CellPadding="4" ForeColor="#333333" 
    GridLines="None" Width="915px" BorderStyle=Ridge >
    <AlternatingRowStyle BackColor="White" />

    <Columns>
    <asp:TemplateField ItemStyle-Width=90>
       <HeaderTemplate>
           <asp:CheckBox ID="selectAllCheckBox" runat="server" Text="Select all"/>
       </HeaderTemplate>
     <ItemTemplate>

       <asp:CheckBox ID="selectCheckBox" runat="server"/>


     </ItemTemplate>

  </asp:TemplateField>

并尝试实现以下javascript函数，以便当用户点击selectAllCheckBox时，所有复选框都会被选中-

 $(document).ready(function() {

  var headerCheckbox = $('#group_table > tbody > tr > th > input:checkbox');

  headerCheckbox.click(function() {
     var headerChecked = $(this).attr('checked');
     var rowCheckboxes = $('#group_table > tbody > tr > td > input:checkbox');
     rowCheckboxes.attr('checked', headerChecked);
  }); 

});

但由于某种原因，这没有任何影响，我哪里出错了？

【问题讨论】：

你能给我们生成的html输出吗？
不应该headerCheckbox 选择器是$("#group_table > thead > tr > th > input:checkbox");？
@mattytommo 这是正确的答案，并且已经解决了问题，如果你把答案写下来，我会在你第一次发现问题时将其标记为正确。
@Jambo 完成 :)。很高兴我能帮上忙

标签： javascript asp.net gridview

【解决方案1】：

正如我对问题的评论（您说的是正确的）中所述，headerCheckbox 变量的选择器错误。表格标题在thead 不是 tbody。试试这个：

var headerCheckbox = $("#group_table > thead > tr > th > input:checkbox");

【讨论】：

【解决方案2】：

如果我是你，我会这样做

<asp:GridView ID="group_table" runat="server" AutoGenerateColumns="False" ClientIDMode="Static"
        CellPadding="4" ForeColor="#333333" GridLines="None" Width="915px" BorderStyle="Ridge">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:TemplateField ItemStyle-Width="90">
                <HeaderTemplate>
                    <asp:CheckBox ID="selectAllCheckBox" runat="server" Text="Select all" onclick="toggleChecks(this);" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="_CheckBox" runat="server" CssClass="psudoClass" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
</asp:GridView>

在要检查的复选框中添加psudoClass，然后执行此操作

function toggleChecks(sender) {
   $(".psudoClass").each(function (index, item) {
        item.children[0].checked = sender.checked;
   });
}

【讨论】：

很好，很整洁，我可以尝试实现这个，很好的补充建议。

【解决方案3】：

我不知道 asp:GridView 是如何生成 html 的，但也许问题是您在 tbody > tr > th 而不是 thead > tr > th 上添加了点击处理程序？

【讨论】：