用一个按钮取消选中一组选中的输入类型=“复选框”答案

【问题标题】：Uncheck a group of checked input type="checkbox" with a single button用一个按钮取消选中一组选中的输入类型=“复选框”
【发布时间】：2017-06-08 17:58:55
【问题描述】：

我有一个带有输入类型复选框组的#main-container。这些复选框在选中时会打开按钮列表。

包含所有这些的#main-container 可以通过一个按钮关闭。我遇到的问题是如何使关闭#main-container 的这个按钮也取消选中#main-container 关闭时选中的所有复选框？

在底部，我包含了我目前知道的使用 Javascript 执行此操作的唯一方法，但这意味着为每个复选框创建一个变量，并且该复选框必须具有唯一的 ID。我试图避免这种情况。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>input checkbox</title>
  <style>
    body {
      margin: 0;
      background: beige;
      border: 1px solid blue;
    }
    .main-container {
      border: 1px solid red;
      width: 25%;
      position: relative;
    }
    .toggle-box {
      display: none;
    }
    label {
      margin: 0.2em;
      display: block;
      text-align: center;
      transition: all 1s linear;
      border: 1px solid green;
    }
    .toggle-box + div {
      display: none;
      margin: 0.2em;
      text-align: center;
    }
    .toggle-box:checked + div {
      display: block;
      border: 1px solid black;
      transition: all 1s linear;
    }
    button {
      display: block;
      margin: auto;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="main-container" class="main-container">
    <label for="toggle-box">A</label>
    <input class="toggle-box" id="toggle-box" type="checkbox" >
    <div>
      <button type="button">submit</button>
      <button type="button">submit</button>
    </div>
    <label for="toggle-box2">B</label>
    <input class="toggle-box" id="toggle-box2" type="checkbox" >
    <div>
      <button type="button">submit</button>
      <button type="button">submit</button> 
    </div>
    <div></div>
    <div></div>
    <div class="test1"></div>
  </div>
  <button type="button" onclick="closeMe()">close</button>
  <button type="button" onclick="openMe()">open</button>
  <script>
    function closeMe() {
      var $toggleBox = document.getElementById("toggle-box");
      $toggleBox.checked = false;
      document.getElementById("main-container").style.display = "none";
    }
    function openMe() {
      document.getElementById("main-container").style.display = "block";
    }
  </script>
  </body>
</html>

【问题讨论】：

标签： javascript html checkbox input

【解决方案1】：

function closeMe() {
    var $toggleBoxes = document.querySelectorAll(".toggle-box");
    $toggleBoxes.forEach(function(box){
        box.checked = false;
    });

    document.getElementById("main-container").style.display = "none";
}

document.querySelectorAll 返回一个包含所有匹配元素的数组（与 css 选择器匹配）。然后，我们使用forEach 循环遍历所有这些元素（如果需要，您可以使用for 循环）。

【讨论】：

【解决方案2】：

您可以使用document.querySelectorAll 来选择所有复选框，例如：

var cbks = document.querySelectorAll('.toggle-box'); cbks.forEach(function(val){ val.checked = true; });

【讨论】：

如果你想添加代码，选择它然后按{}按钮。仅将 '`' 用于内联代码。

【解决方案3】：

您可以通过 getElementsByClassName 选择所有复选框，然后遍历所有复选框并将选中的值设置为 false。

var $toggleBoxes = document.getElementsByClassName("toggle-box");
[].forEach.call($toggleBoxes, function(elem) {
      elem.checked = false;
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>input checkbox</title>

  <style>
    body {
      margin: 0;
      background: beige;
      border: 1px solid blue;
    }
    .main-container {
      border: 1px solid red;
      width: 25%;
      position: relative;
    }
    .toggle-box {
      display: none;
    }
    label {
      margin: 0.2em;
      display: block;
      text-align: center;
      transition: all 1s linear;
      border: 1px solid green;
    }
    .toggle-box + div {
      display: none;
      margin: 0.2em;
      text-align: center;
    }
    .toggle-box:checked + div {
      display: block;
      border: 1px solid black;
      transition: all 1s linear;
    }
    button {
      display: block;
      margin: auto;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="main-container" class="main-container">
    <label for="toggle-box">A</label>
    <input class="toggle-box" id="toggle-box" type="checkbox">
    <div>
      <button type="button">submit</button>
      <button type="button">submit</button>
    </div>
    <label for="toggle-box2">B</label>
    <input class="toggle-box" id="toggle-box2" type="checkbox">
    <div>
      <button type="button">submit</button>
      <button type="button">submit</button>
    </div>
    <div></div>
    <div></div>
    <div class="test1"></div>


  </div>

  <button type="button" onclick="closeMe()">close</button>
  <button type="button" onclick="openMe()">open</button>




  <script>
    function closeMe() {
      var $toggleBoxes = document.getElementsByClassName("toggle-box");
      [].forEach.call($toggleBoxes, function(elem) {
      elem.checked = false;
      });
      document.getElementById("main-container").style.display = "none";
    }

    function openMe() {
      document.getElementById("main-container").style.display = "block";

    }
  </script>

</body>

</html>

【讨论】：

@chatterb0x 很高兴为您提供帮助:)