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

时间：2016-06-19 03:39:45

标签： javascript html checkbox

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

这是我的代码：

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

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

中不允许这样做

答案 2 :(得分：0)

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

＆＃13;
＆＃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;
＆＃13;
＆＃13;

相关问题
最新问题