显示HTML页面中具有相同id的所有复选框元素
show all check box elements with the same id in html page
我正在创建一个包含表格的HTML页面，在表格上方的一些列有一个按钮，当用户点击它时，它应该显示该列每一行存在的所有复选框。
我尝试创建一个空的CSS类，并尝试使用jQuery ('.label.checkbox-label').show();从javascript方法中显示这个复选框，但它不起作用。
如何做到这一点，我可以让一个id为所有复选框或依赖CSS类，但两者都不起作用。
下面是我的代码，包含HTML，我只是设置了一个不同的id s复选框，以显示我的想法和我应该做什么。
function showDiv(x) {
document.getElementById('1').style.display = "block";
document.getElementById('edit1').style.visibility = "hidden";
document.getElementById('td1').style.backgroundColor = "cadetblue";
document.getElementById('tdd1').style.backgroundColor = "cadetblue";
document.getElementById('tddd1').style.backgroundColor = "cadetblue";
//$('.label.checkbox-label').show();
document.getElementById('Column5_1').style.visibility = "visible";
document.getElementById('Column5_2').style.visibility = "visible";
document.getElementById('Column5_3').style.visibility = "visible";
document.getElementById('Column5_4').style.visibility = "visible";
}
function HideDialog(x) {
document.getElementById('1').style.display = "none";
document.getElementById('edit1').style.visibility = "visible";
document.getElementById('td1').style.backgroundColor = "transparent";
document.getElementById('tdd1').style.backgroundColor = "transparent";
document.getElementById('tddd1').style.backgroundColor = "transparent";
}
$(document).ready(function() {
jQuery("#tree ul").hide();
jQuery("#tree li").each(function() {
var handleSpan = jQuery("<span></span>");
handleSpan.addClass("handle");
handleSpan.prependTo(this);
if (jQuery(this).has("ul").size() > 0) {
handleSpan.addClass("collapsed");
handleSpan.click(function() {
var clicked = jQuery(this);
clicked.toggleClass("collapsed expanded");
clicked.siblings("ul").toggle();
});
}
});
})ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding-left: 0.5em;
}
table.classname td {
background-color: antiquewhite;
}
.handle {
background: transparent url(/images/spacer.png);
background-repeat: no-repeat;
background-position: center bottom;
display: block;
float: left;
width: 10px;
height: 11px;
}
.collapsed {
background: transparent url(/images/plus-black.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
.expanded {
background: transparent url(/images/minus-black.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
label.checkbox-label {
/*some styles here*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page-header">
<h1>hello</h1>
<div class="class=" col-lg-7 ">
<p class="bs-component ">
<a href="# " class="btn btn-primary ">Expand All</a>
<a href="# " class="btn btn-primary ">Show hide regions</a>
</p>
<p class="bs-component ">
<a href="# " class="btn btn-primary ">Collapse All</a>
<a href="# " class="btn btn-primary ">Show hide countries</a>
</p>
</div>
</div>
<div id="container " style="overflow: auto;border:groove;height:4% ">
<div id="table-header " style="padding-left:2% ">
<table class="table table-striped table-hover ">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="td1 "><div id="1 " style="display:none;background-color:cadetblue " >
<label>insert</label><input type="text " />
<div class="class=" col-lg-7">
<p class="bs-component">
<a href="#" class="btn btn-xs btn-primary" onclick="HideDialog();">Add for selected</a>
<a href="#" class="btn btn-xs btn-primary">Clear and insert</a>
</p>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="tdd1"><a id="edit1" href="#" class="btn btn-xs btn-primary" onclick="showDiv(1)">edit</a>
</td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td><a href="#" class="btn btn-xs btn-primary">edit</a>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td id="tddd1">Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</thead>
</table>
</div>
<div id="tabel-details">
<ul id="tree">
<li>
Section A
<ul>
<li>
Line Item
<ul>
<li>
<table class="table table-striped table-hover">
<thead style="visibility:hidden">
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>Comment</td>
<td>Region</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</thead>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>
<input id="Column5_1" class="label.checkbox-label" type="checkbox" style="visibility:hidden" />xxxxx
</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>
<input id="Column5_2" type="checkbox" style="visibility:hidden" />xxxxx
</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>
<input id="Column5_3" type="checkbox" style="visibility:hidden" />xxxxx
</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>
<input id="Column5_4" type="checkbox" style="visibility:hidden" />xxxxx
</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="footer">
<div class="class=" col-lg-7 ">
<p class="bs-component ">
<a href="# " class="btn btn-primary ">Manage sections</a>
<a href="# " class="btn btn-primary ">Manage Columns</a>
</p>
</div>
</div>试试这个
function togglecheckboxes(master,group){
var cbarray = document.getElementsByClassName(group);
for(var i = 0; i < cbarray.length; i++){
var cb = document.getElementById(cbarray[i].id);
cb.checked = master.checked;
}
}<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')"> Toggle All
<br><br>
<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1"> Item 1<br>
<input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2"> Item 2<br>
<input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3"> Item 3<br>
<input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4"> Item 4<br>相关文章：
- Javascript复选框函数:;缺少:在属性id之后"
- 点击后，比较id'所选复选框的s以列出href
- 如何获取字段集元素中复选框的所有ID
- 使用jQuery获取所有未选中复选框的ID
- Bootstrap使用复选框显示和隐藏id
- 获取不带Id JQuery的复选框值
- 使用 Jquery 选中基于 Div ID 和类的所有复选框
- 循环浏览页面上所有选中的复选框并将id拉入数组不起作用
- 设置一个复选框，其中包含使用javaScript检查的特定名称和id
- 获取从默认设置更改的所有复选框的 id
- 将关联的 ID 添加到 for 循环中的复选框
- 获取使用 jquery 选择的复选框的 ID
- Javascript 不会对带有变量 id 的复选框做出反应以显示隐藏的文本框
- 如何使用 onclick 事件引用按 id 计算选中的复选框
- 选中没有名称或 ID 的复选框
- 发送具有相同 ID 的多个复选框的值
- 如何使用带有复选框的事件触发器访问 ID 数组
- 如何在 Jquery 中获取复选框的 ID
- 从数据库中检索的选中复选框的数据库中获取ID
- ID1、ID2、ID3等多个ID复选框需要Jquery验证
