检查 ASP.NET Gridview 中的所有复选框，同一页面上的多个表

【问题标题】：Checking all checkboxes in ASP.NET Gridview, multiple tables on the same page检查 ASP.NET Gridview 中的所有复选框，同一页面上的多个表
【发布时间】：2012-12-20 18:29:45
【问题描述】：

好的，所以我已经提交了大量文档并在一天中尝试了很多次，但似乎无法确定这个问题。我在一页上有多个 Gridview（在可折叠面板内），其中两个有一个包含复选框的列（第 7 列，从 0 开始）。我想让用户使用标题行中的复选框字段来选择/取消选择所有复选框。我更喜欢使用 Javascript 来完成此操作，但似乎无法到达那里。 This 是我更喜欢的方式，因为它似乎可以与页面上的多个表格一起使用（如果我错了，请纠正我）。使用 Firebug，没有错误，只是无法正常工作，我不知道为什么。

这是我的 ASP.NET 代码：

        <asp:GridView ID="gvSerialNumberDetails" CellPadding="5" runat="server" CssClass="wind" AutoGenerateColumns="false">
            <HeaderStyle CssClass="windHeader" />
            <Columns>
                <asp:BoundField DataField="Description" HeaderText="Description" />
                <asp:BoundField DataField="Serial Number" HeaderText="Serial Number" />
                <asp:BoundField DataField="Facility" HeaderText="Facility" />
                <asp:BoundField DataField="Department" HeaderText="Department" />
                <asp:BoundField DataField="EmpID" HeaderText="EmpID" />
                <asp:BoundField DataField="Configuration" HeaderText="Config" />
                <asp:BoundField DataField="Error" HeaderText="Errors" />
                <asp:TemplateField>
                    <HeaderTemplate> 
                        <asp:CheckBox ID="chkHeader" ToolTip="Select All" runat="server" 
                            onclick="changeAllCheckBoxes(this)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkItem" runat="server" ToolTip="Select this item" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

这是我的 Javascript：

<script type="text/javascript" language="javascript">
    function changeAllCheckBoxes(sender) {
    var gridViewRows = GetParentElementByTagName(sender, "table").rows;
        for (var i = 1; i < gridViewRows.length; ++i) {
            gridViewRows[i].cells[7].childNodes[0].checked = sender.checked;
        }
    }

    function GetParentElementByTagName(element, tagName) {
        var element = element;
        while (element.tagName != tagName)
            element = element.parentNode;
        return element;
    }
</script>

更新

好的，所以我现在收到错误消息。 "TypeError: element is null [Break On This Error] </tr><tr>" 我该如何解决这个问题？似乎它应该爬上 DOM 并找到 table 元素，但没有。

【问题讨论】：

• 我不认为该复选框的父元素是 - 你确定它是吗？
• 能调试一下js代码看看是什么情况吗？
• David，GetParentElementByTagName 使用了一个 while 循环，它应该从选中的复选框爬上 DOM，直到找到标记名为“table”的元素。
• 好的，所以我现在收到一个错误。 “TypeError: element is null [Break On This Error]
” 我该如何解决这个问题？它似乎应该爬上 DOM 并找到 table 元素，但没有。