Question

我想保留处理程序，如果未选中父复选框，子复选框将隐藏但是，目前它不会同时解开儿童复选框我希望孩子的复选框也可以不受控制。

这是我的代码：

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

Answer 1

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

Answer 2

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

中不允许这样做

Answer 3

您可以在未选中的复选框下迭代输入。

＆＃13;

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);
    }
  }
};

＆＃13;

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

＆＃13;

当Someone UnChecks Parent Checkbox时，Child也会被取消选中

3 个答案: