jQuery 如果选中复选框，则显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18421082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide div if checkbox selected
提问by user2421781
I need a page with checkboxes and visible div if at minimum 1 is checked.
如果至少选中 1，我需要一个带有复选框和可见 div 的页面。
Here I got page that if i check checkbox, the div will show. It's okay and works correctly.
在这里，我得到了一个页面，如果我选中复选框，div 将显示。没关系，并且可以正常工作。
When I check 3 checkboxes and uncheck 1, the div is missing, when i check some box again, the div will show - it isn't correct.
当我选中 3 个复选框并取消选中 1 时，div 丢失，当我再次选中某个复选框时，div 将显示 - 它不正确。
How do I need modify the script to show all time the div, if at minimum 1 checkbox is checked, without this "jumping"?
如果至少选中 1 个复选框，而没有这种“跳跃”，我该如何修改脚本以始终显示 div？
<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>
<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
</form>
</body>
</html>
回答by mithunsatheesh
change the input boxes like
更改输入框，例如
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
and js code as
和js代码为
function showMe (box) {
var chboxs = document.getElementsByName("c1");
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(box).style.display = vis;
}
here is a demo fiddle
这是一个演示小提琴
回答by Andy
You would need to always consider the state of allcheckboxes!
您需要始终考虑所有复选框的状态！
You could increase or decrease a number on checking or unchecking, but imagine the site loads with three of them checked.
您可以在选中或取消选中时增加或减少一个数字，但想象一下站点加载时选中了其中的三个。
So you always need to check all of them:
所以你总是需要检查所有这些：
<script type="text/javascript">
<!--
function showMe (it, box) {
// consider all checkboxes with same name
var checked = amountChecked(box.name);
var vis = (checked >= 3) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
function amountChecked(name) {
var all = document.getElementsByName(name);
// count checked
var result = 0;
all.forEach(function(el) {
if (el.checked) result++;
});
return result;
}
//-->
</script>
回答by peter
<input type="checkbox" name="check1" value="checkbox" onchange="showMe('div1')" /> checkbox
<div id="div1" style="display:none;">NOTICE</div>
<script type="text/javascript">
<!--
function showMe (box) {
var chboxs = document.getElementById("div1").style.display;
var vis = "none";
if(chboxs=="none"){
vis = "block"; }
if(chboxs=="block"){
vis = "none"; }
document.getElementById(box).style.display = vis;
}
//-->
</script>
