Question

好吧，因此有大量的文件记录我已经提交过并且在一天中多次尝试并且似乎无法解决这个问题。我在一个页面上（可折叠面板内部）有多个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并找到表元素，但不是。

Answer 1

请尝试下面的javascript函数insdead。我检查了这个函数，它在我的代码中运行得很好。如果您发现任何困难，请告诉我。

    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 Alternation如下：

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

这里我为demo添加了jsfiddle链接：Demo link

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

1 个答案: