Show/hide div if checkbox selected

Question

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>

aside: the _table_ frightens me and you should use labels like ```Show Hide Checkbox``` — Andy, Aug 24 '13 at 17:30

score 32 · Accepted Answer · answered Aug 24 '13 at 17:22

32

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

answered Aug 24 '13 at 17:22

Mithun Satheesh

27,240
14
77
101

huh!? HOw can this be the answer, when the question was asking how to show/hide a DIV element, not a CheckBox!? – Fandango68 Jun 10 '16 at 04:39
@Fandango68 he's going through the checkboxes to determine the desired visibility. The last line gets the div element by its ID and then sets its display to the predetermined visibility. The variable name (box) is just misleading because if you look at the argument passed to the function, box actually ends up with a value of "div1" :) – wmebane Nov 16 '17 at 18:58

Andy · Answer 2 · 2013-08-24T17:28:22.303

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>

score 1 · Answer 3 · answered Apr 13 '17 at 16:37

<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>

Welcome to Stack, Peter! Please add some explanation to your answers so that askers can understand what you're doing. — Hudson Taylor, Apr 13 '17 at 17:31

Show/hide div if checkbox selected

3 Answers3

Linked