[英]When Someone UnChecks the Parent Checkbox, the Child gets unchecked as well
我想保留处理程序，如果未选中父复选框，则子复选框会隐藏。
但是，当前它不会同时取消对子复选框的装箱。
我也希望取消选中儿童复选框。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Your title</title>
<script type="text/javascript">
function showMe(it, box) {
var display = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = display;
}
function OpenAll() {
alert("Case Study Available!");
var i, data = document.forms[0].box;
for(i = 0; i < data.length; i++) {
if(data[i].checked) {
window.open(data[i].value.toString());
}
}
}
</script>
</head>
<body>
<form method="post">
<input name="pumps" onclick="showMe('div1', this)" type="checkbox" value="http://www.expedia.com">Pumps
<div class="right" id="div1" style="display:none">
<blockquote>
<input name="cent" type="checkbox" value="http://www.facebook.com">Centrifugal
</blockquote>
<blockquote>
<input name="rot" onclick="showMe('div2', this)" type="checkbox" value="http://www.google.com">Rotary
</blockquote>
<blockquote>
<div class="right" id="div2" style="display:none">
<blockquote>
<input name="50HP" type="checkbox">Less Than 50HP
</blockquote>
<blockquote>
<input name="100HP" type="checkbox">50HP - 100HP
</blockquote>
</div>
</blockquote>
</div><br>
<input name="ovens" type="checkbox" value="http://www.yelp.com">Ovens<br>
<input onclick="OpenAll()" type="submit" value="Save">
</form>
</body>
</html>
在div中找到所有复选框，并将那里的checked属性更改为false。
您可以使用jQuery作为此代码段的示例
function showMe(it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; $("#" + it).find('[type=checkbox]').prop('checked', false) }; function OpenAll() { alert("Case Study Available!"); var data = document.forms[0].box; var i; for (i = 0; i < data.length; i++) { if (data[i].checked) { window.open("" + data[i].value); } } };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="POST"> <input type="checkbox" name="pumps" onclick="showMe('div1', this)" value="http://www.expedia.com">Pumps <div class="right" id="div1" style="display:none"> <BLOCKQUOTE> <input type="checkbox" name="cent" value="http://www.facebook.com">Centrifugal </BLOCKQUOTE> <BLOCKQUOTE> <input type="checkbox" name="rot" onclick="showMe('div2', this)" value="http://www.google.com">Rotary </BLOCKQUOTE> <BLOCKQUOTE> <div class="right" id="div2" style="display:none"> <blockquote> <input type="checkbox" name="50HP">Less Than 50HP </blockquote> <blockquote> <input type="checkbox" name="100HP">50HP - 100HP </blockquote> </div> </BLOCKQUOTE> </div> <br> <input type="checkbox" name="ovens" value="http://www.yelp.com">Ovens </br> <input type="submit" value="Save" onclick="OpenAll()" /> </form>
querySelectorAll选择输入元素作为document.forms[0].box返回undefined data[i].checked = false; 如果checked function showMe(it, box) { var vis = (box.checked) ? "block" : "none"; document.getElementById(it).style.display = vis; }; function OpenAll() { alert("Case Study Available!"); var data = document.querySelectorAll('input[type="checkbox"]'); for (var i = 0; i < data.length; i++) { if (data[i].checked) { data[i].checked = false; window.open(data[i].value); } } };
<form method="POST"> <input type="checkbox" name="pumps" onclick="showMe('div1', this)" value="http://www.expedia.com">Pumps <div class="right" id="div1" style="display:none"> <BLOCKQUOTE> <input type="checkbox" name="cent" value="http://www.facebook.com">Centrifugal </BLOCKQUOTE> <BLOCKQUOTE> <input type="checkbox" name="rot" onclick="showMe('div2', this)" value="http://www.google.com">Rotary </BLOCKQUOTE> <BLOCKQUOTE> <div class="right" id="div2" style="display:none"> <blockquote> <input type="checkbox" name="50HP">Less Than 50HP </blockquote> <blockquote> <input type="checkbox" name="100HP">50HP - 100HP </blockquote> </div> </BLOCKQUOTE> </div> <br> <input type="checkbox" name="ovens" value="http://www.yelp.com">Ovens <br> <input type="button" value="Save" onclick="OpenAll()" /> </form>
注意： window.open在上述代码段中将失败，因为在SO-snippet是不允许的
您可以迭代未选中复选框下的输入。
function showMe(it, box) { var element = document.getElementById(it); if (box.checked) { element.style.display = "block"; } else { element.style.display = "none"; var inputs = element.getElementsByTagName('input'); for(i = 0; i < inputs.length; i++) { inputs[i].checked = false; } } }; function OpenAll() { alert("Case Study Available!"); var data = document.forms[0].box; for (i = 0; i < data.length; i++) { if (data[i].checked) { window.open("" + data[i].value); } } };
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <form method="POST"> <input type="checkbox" name="pumps" onclick="showMe('div1', this)" value="http://www.expedia.com">Pumps <div class="right" id="div1" style="display:none"> <BLOCKQUOTE> <input type="checkbox" name="cent" value="http://www.facebook.com">Centrifugal </BLOCKQUOTE> <BLOCKQUOTE> <input type="checkbox" name="rot" onclick="showMe('div2', this)" value="http://www.google.com">Rotary </BLOCKQUOTE> <BLOCKQUOTE> <div class="right" id="div2" style="display:none"> <blockquote> <input type="checkbox" name="50HP">Less Than 50HP </blockquote> <blockquote> <input type="checkbox" name="100HP">50HP - 100HP </blockquote> </div> </BLOCKQUOTE> </div> <br> <input type="checkbox" name="ovens" value="http://www.yelp.com">Ovens </br> <input type="submit" value="Save" onclick="OpenAll()" /> </form>
当使用jQuery取消选中子复选框时，如何取消选中父复选框？
[英]How to unselect the parent checkbox when their child checkbox is unchecked using jQuery?
当 Html 复选框未选中时，有什么方法可以触发 Javascript 中的事件？
[英]Any way of triggering a event in Javascript when Html checkbox gets unchecked?
如果取消选中任何子复选框，如何取消选中“全选”复选框
[英]How do I uncheck 'select-all' checkbox if any child checkbox gets unchecked
Vue：选中/取消选中祖父母或父母时选中/取消选中复选框
[英]Vue: Check/uncheck checkbox when Grandparent or parent is checked/unchecked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.