有一个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
中的所有复选框,并在名称中添加错误
答案 0 :(得分: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...
}
}