I need a page with checkboxes and visible div if at minimum 1 is checked.
Here I got page that if i check checkbox, the div will show. It's okay and works correctly.
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.
How do I need modify the script to show all time the div, if at minimum 1 checkbox is checked, without this "jumping"?
<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>
This question is related to
javascript
jquery
dom-events
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
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
<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>
You would need to always consider the state of all checkboxes!
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>
Source: Stackoverflow.com