When Someone UnChecks the Parent Checkbox, the Child gets unchecked as well

Question

I want to keep the handler where if the parent check-boxes is unchecked, the child check-boxes hide.
However, currently it does not at the same time un-boxes the child check-boxes.
I would like the child check-boxes to be unchecked as well.

Here is my code:

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

you have mentioned `jQuery` in your tags and haven't used it. `jQuery` will make this a piece of cake. — valar morghulis, Jun 19 '16 at 04:23
I know this might somewhat off topic, but your HTML and JS looks rather poorly formatted, if you are not sure how to properly format your HTML, CSS & JS you could use https://www.dirtymarkup.com. Alternatively you could find a text editor that automatically indents for you when you press enter, two common examples are Sublime Text and Atom. Also, you have used upper-case tag names as well as lower-case tag names, it is best practice to use the same (type of) case across your entire application for **most** (if possible all) tags. With that being said, Good luck and Welcome to Stack Overflow. — , Jun 19 '16 at 04:48
It is considered bad practice to use `event attributes`. You can find out more about the advantages of placing your events in your JS in this answer http://stackoverflow.com/a/5871830/5870134. You could also read more about Un-Obtrusive JavaScript over on https://en.wikipedia.org/wiki/Unobtrusive_JavaScript. — , Jun 19 '16 at 05:00

score 0 · Answer 1 · answered Jun 19 '16 at 04:05

Find all checkbox in the the div and change there checked property to false.

Used jQuery for this snippet you mai use this as example

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>

score 0 · Answer 2 · answered Jun 19 '16 at 04:06

Use querySelectorAll to select input elements as document.forms[0].box returns undefined
Set data[i].checked = false; if it is 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>

Note: window.open will fail in above snippet as it is not allowed in SO-snippet

score 0 · Answer 3 · answered Jun 19 '16 at 04:18

You could iterate the inputs under the unchecked checkbox.

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>

When Someone UnChecks the Parent Checkbox, the Child gets unchecked as well

3 Answers3