javascript - 3级嵌套中继器

Question

有一个 3 级嵌套中继器，显示每个组的菜单标题和菜单项，如图所示

在第二个中继器中有 4 个复选框来检查第三个中继器中的一些复选框，如图所示

     <asp:Repeater ID="RpGroups" runat="server" OnItemDataBound="RpGroups_ItemDataBound">
                <ItemTemplate>
                    <asp:Label ID="GID" runat="server" Text='<%# Eval("groupid")%>' Visible="false"> </asp:Label>
                    <div class="panel  panel-primary ">

                        <div class="panel-heading">

                            <h3 onclick="swap(<%# Eval("groupid")%>)" class="panel-title"><%# Eval("groupName")%> <span class="navbar-right glyphicon glyphicon-eye-open" aria-hidden="true"></span></h3>


 </a>
                        </div>

                        <div class="panel-heading">



                        </div>

                        <div class="panel-body " id="<%# Eval("groupid")%>" hidden="hidden">
                            <div>

                                <asp:Repeater ID="RpMenu" runat="server" OnItemDataBound="FillMenuItems">
                                    <ItemTemplate>
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">

                                                <h3 class="panel-title" style="text-align: center"><%# Eval("HeadItemText")%>
                                                    <div class="navbar-right"></div>
                                                </h3>
                                            </div>
                                            <div class="panel-body">
                                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false"></asp:Label>

                                                </table>
                                        <asp:Repeater ID="RbItems" runat="server">
                                            <HeaderTemplate>
                                                <div class="table-responsive">
                                                    <table class="table table-striped table-responsive  ">
                                                        <thead>
                                                            <tr class="alert-danger table-responsive">

                                                                <th class="col-sm-2 ">Page Name</th>
                                                                <th>

                                                                    <input id="Checkbox1" type="checkbox" value="Full Add" runat="server" onclick="checkadd(this, 'Add')" />Full Add</th>

                                                                <th>
                                                                    <input id="Checkbox2" type="checkbox" value="Full View" onclick="checkadd(this), 'View'" />Full View</th>

                                                                <th>
                                                                    <input id="Checkbox3" type="checkbox" value="Full Update" onclick="checkadd(this), 'Edit'" />Full Updte</th>

                                                                <th>
                                                                    <input id="Checkbox4" type="checkbox" value="Full Delete" onclick="checkadd(this, 'Delete')" />Full Delete</th>

                                                            </tr>
                                                        </thead>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <%--<div class="table-responsive">
                                                   <table class="table table-striped table-hover">--%>


                                                <tr class="view" >

                                                    <asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false"></asp:Label>
                                                    <td class="col-sm-2"><strong>
                                                        <div><%# Eval("MenuItemName")%></div>
                                                    </strong></td>


                                                    <td>
                                                        <asp:CheckBox ID="Add" runat="server" Text="Add" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="View" runat="server" Text="View" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Edit" runat="server" Text="Update" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Delete" runat="server" Text="Delete" /></td>
                                                </tr>

                                                <%-- </table>
                                                </div>--%>
                                                <%-- <li>
                                                    <a href="<%# Eval("MenuItemLink")%>"><%# Eval("MenuItemName")%></a>
                                                </li>--%>
                                            </ItemTemplate>
                                            <FooterTemplate>
                                                </table>
                                                </div>
                                            </FooterTemplate>
                                        </asp:Repeater>

                                            </div>
                                        </div>

                                    </ItemTemplate>

                                </asp:Repeater>
                            </div>
                        </div>



                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <asp:Label ID="GID" runat="server" Text='<%# Eval("groupid")%>' Visible="false"> </asp:Label>
                    <div class="panel  panel-Lightblue ">

                        <div class="panel-heading">

                            <h3 onclick="swap(<%# Eval("groupid")%>)" class="panel-title"><%# Eval("groupName")%> <span class="navbar-right glyphicon glyphicon-eye-open" aria-hidden="true"></span></h3>


 </a>
                        </div>


                        <div class="panel-body " id="<%# Eval("groupid")%>" hidden="hidden">
                            <div>

                                <asp:Repeater ID="RpMenu" runat="server" OnItemDataBound="FillMenuItems">
                                    <ItemTemplate>
                                        <div class="panel panel-Lightblue">
                                            <div class="panel-heading">

                                                <h3 class="panel-title" style="text-align: center"><%# Eval("HeadItemText")%>
                                                    <div class="navbar-right"></div>
                                                </h3>
                                            </div>
                                            <div class="panel-body">
                                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false"></asp:Label>

                                                </table>
                                        <asp:Repeater ID="RbItems" runat="server">
                                            <HeaderTemplate>
                                                <div class="table-responsive">
                                                    <table class="table table-striped table-responsive  ">
                                                        <thead>
                                                            <tr class="alert-danger table-responsive">

                                                                <th class="col-sm-2 ">Page Name</th>
                                                                <th>
                                                                    <input id="Checkbox1" type="checkbox" value="Full Add" runat="server" onclick="checkadd(this, 'Add')" />Full Add</th>

                                                                </script>
                                                                <th>
                                                                    <input id="Checkbox2" type="checkbox" value="Full View" onclick="checkadd(this, 'View')" />Full View</th>

                                                                <th>
                                                                    <input id="Checkbox3" type="checkbox" value="Full Updte" onclick="checkadd(this, 'Edit')" />Full Updte</th>

                                                                <th>
                                                                    <input id="Checkbox4" type="checkbox" value="Full Delete" onclick="checkadd(this, 'Delete')" />Full Delete</th>

                                                            </tr>
                                                        </thead>
                                            </HeaderTemplate>
                                            <ItemTemplate>



                                                <tr class="view">

                                                    <asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false"></asp:Label>
                                                    <td class="col-sm-2"><strong>
                                                        <div><%# Eval("MenuItemName")%></div>
                                                    </strong></td>


                                                    <td>
                                                        <asp:CheckBox ID="Add" runat="server" Text="Add" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="View" runat="server" Text="View" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Edit" runat="server" Text="Update" /></td>
                                                    <td>
                                                        <asp:CheckBox ID="Delete" runat="server" Text="Delete" /></td>
                                                </tr>


                                            </ItemTemplate>
                                            <FooterTemplate>
                                                </table>
                                                </div>
                                            </FooterTemplate>
                                        </asp:Repeater>

                                            </div>
                                        </div>

                                    </ItemTemplate>

                                </asp:Repeater>
                            </div>
                        </div>



                    </div>
                </AlternatingItemTemplate>
            </asp:Repeater>

       <script type="text/javascript">
                    function checkadd(chk, name) {
                        if (chk.checked == true) {
                            document.getElementById('<% = RpGroups.ClientID %>');

                            var chk = div.getElementsByTagName('input');
                            var len = chk.length;

                            for (var i = 0; i < len; i++) {
                                if (chk[i].type === 'checkbox' && chk[i].name===name) {
                                    chk[i].checked = elem.checked;
                                }
                            }

                        }
                        else
                        {
                            var div = document.getElementById('<% = RpGroups.ClientID %>');

                            var chk = div.getElementsByTagName('input');
                            var len = chk.length;

                            for (var i = 0; i < len; i++) {
                                if (chk[i].type === 'checkbox' && chk[i].name === name) {
                                    chk[i].checked = false;
                                }
                            }

                        }

                    }

                </script>

我需要checkbox带有值（完整添加）检查所有复选框rpitems名称添加我的代码中的错误

Answer 1

如果您查看源代码并研究呈现的标记，您会注意到复选框是使用特定模式创建的。您可以根据您的要求使用该事实。

现在对于 javascript 方面的事情......你需要走上 DOM 树并找到与单击的复选框相对应的关闭表。

你正在做这样的事情：

onclick="checkadd(this, 'View')

所以该函数的第一个参数是对用户单击的复选框的引用......因此我们必须找到最近的表。因此我们做这样的事情......

var tbl = findClosestTable(chk); //stores reference to the table that houses checkbox

findClosestTable是这样实现的：

function findClosestTable(el) {
    while(!el.tagName.toLowerCase() === 'table' && el !== document.body)
        el = el.parentNode;
    if(el == document.body)
        return null;
    else
        return el; //should be the table reference.
}

一旦你有了它，你就可以使用该引用通过标记名获取所有输入元素。

var inputElements = tbl.getElementsByTagName('input');

现在任务相当简单。

for(var i = 0, j = inputElements.length; i < j; i++ ) {
    var el = inputElements[i];
    if(el.type === 'checkbox' && el.id.indexOf('Add') > 0 && el !== chk) {
        //el is now a reference to your desired checkbox element...
    }
}