0

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

4

1 回答 1

1

请尝试下面的javascript函数而不是你的。我检查了这个函数，它在我的代码中完美运行。如果您发现任何困难，请告诉我。

    function changeAllCheckBoxes(objparentcheckbox)
   {              
      var HeaderCheckboxControl = objparentcheckbox
      var table = getParentByTagName(HeaderCheckboxControl, 'table');

      //get all the control of the type INPUT in the base control.
      var Inputs = table.getElementsByTagName("input"); 

      for(var n = 0; n < Inputs.length; ++n)
         if(Inputs[n].type == 'checkbox')
         {
            Inputs[n].checked = HeaderCheckboxControl.checked;        
         }        
      return false;
   }
function getParentByTagName(obj, tag)
{
    var obj_parent = obj.parentNode;
    if (!obj_parent) return false;
    if (obj_parent.tagName.toLowerCase() == tag) return obj_parent;
    else return getParentByTagName(obj_parent, tag);
}

上述方法的Jquery交替如下：

function changeAllCheckBoxes(objparentcheckbox)
{
    if(objparentcheckbox.checked)
     $(objparentcheckbox).closest('table').find('input[type=checkbox]').attr('checked', 'checked');        
    else    
     $(objparentcheckbox).closest('table').find('input[type=checkbox]').removeAttr('checked', 'checked');            
}

在这里我为演示添加了 jsfiddle 链接：演示链接

于 2012-12-04T06:23:47.137 回答