3级嵌套中继器
3 level nested repeater
有一个 3 级嵌套中继器，显示菜单 header 和每个组的菜单项，如图所示
在第二个转发器中有 4 个复选框来检查第三个转发器中的一些复选框，具有 javascript 功能，如图
<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 中的所有复选框和名称 添加我的代码中有什么错误
如果您查看源代码并研究呈现的标记，您会注意到复选框是使用特定模式创建的。您可以根据您的要求使用该事实。
现在对于 javascript 方面的事情...您需要沿着 DOM 树向上走，找到与单击的复选框对应的关闭 table。
你正在做这样的事情：
onclick="checkadd(this, 'View')
所以该函数的第一个参数是对用户单击的复选框的引用...因此我们必须找到最接近的 table。因此我们做这样的事情...
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...
}
}
有一个 3 级嵌套中继器，显示菜单 header 和每个组的菜单项，如图所示
在第二个转发器中有 4 个复选框来检查第三个转发器中的一些复选框，具有 javascript 功能，如图
<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 中的所有复选框和名称 添加我的代码中有什么错误
如果您查看源代码并研究呈现的标记，您会注意到复选框是使用特定模式创建的。您可以根据您的要求使用该事实。
现在对于 javascript 方面的事情...您需要沿着 DOM 树向上走，找到与单击的复选框对应的关闭 table。
你正在做这样的事情：
onclick="checkadd(this, 'View')
所以该函数的第一个参数是对用户单击的复选框的引用...因此我们必须找到最接近的 table。因此我们做这样的事情...
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...
}
}