使用JS自动取消选择onclick复选框答案

【问题标题】：Auto deselect onclick checkbox using JS使用JS自动取消选择onclick复选框
【发布时间】：2021-09-06 10:29:24
【问题描述】：

第一件事是第一。我不能用 JQuery，只能用 JS。

我有一些名称不同的复选框。我需要不同的名字。然后我有另一个复选框，单击该复选框应取消选择以前的复选框。

var isAllCheck = false;

function togglecheckboxes(cn) {

  var cbarray = document.getElementsByName(cn);
  for (var i = 0; i < cbarray.length; i++) {

    cbarray[i].checked = !isAllCheck
  }
  isAllCheck = !isAllCheck;
}

<input type="checkbox" name="email">
<input type="checkbox" name="phone">
<input type="checkbox" name="sms">
<input type="checkbox" name="whatsapp">
<input type="checkbox" onclick="togglecheckboxes('cb')" value="Toggle all">

如果名称都是“cb”，那么它可以工作，但我需要它们不同。无论如何我可以在保持不同名称的同时让它工作吗？

非常感谢。

【问题讨论】：

您是要切换复选框，还是只取消选择前一个复选框（因此只有最后一个复选框保持选中状态）

标签： javascript salesforce-marketing-cloud

【解决方案1】：

使用document.querySelectorAll 根据类名等属性选择元素。

var isAllCheck = false;

function togglecheckboxes() {

  var cbarray = document.querySelectorAll('input.check-box');
  for (var i = 0; i < cbarray.length; i++) {
    cbarray[i].checked = !isAllCheck
  }
  isAllCheck = !isAllCheck;
}

<input type="checkbox" class="check-box" name="email">Email
<input type="checkbox" class="check-box" name="phone">Phone
<input type="checkbox" class="check-box" name="sms">SMS
<input type="checkbox" class="check-box" name="whatsapp">Whatsapp
<input type="checkbox" onclick="togglecheckboxes()" value="Toggle all">Toggle All

参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

【讨论】：

【解决方案2】：

使用getElementsByClassName() 代替getElementsByName()。这样，它们都可以有单独的名称，但是您可以使用一个通用类来收集它们并取消选中它们的复选框。请记住，HTML 元素也可以有多个类，因此即使您需要使用类对不同的复选框进行一些特定的样式设置，这也有效，而元素只能有一个名称。出于这个原因，您通常总是希望使用一个公共类（或者如果您只针对一个特定元素，则使用一个 ID）对多个元素执行逻辑操作。

var isAllCheck = false;
  function togglecheckboxes(cn){

      var cbarray = document.getElementsByClassName(cn);
      for(var i = 0; i < cbarray.length; i++){

          cbarray[i].checked = !isAllCheck
  }   
  isAllCheck = !isAllCheck;   
}

<input class="cn" type="checkbox" name="email">
<input class="cn" type="checkbox" name="phone">
<input class="cn" type="checkbox" name="sms">
<input class="cn" type="checkbox" name="whatsapp">
<input type="checkbox" onclick="togglecheckboxes('cn')" value="Toggle all">

【讨论】：