Question

我希望在点击其他按钮时取消选中已选中的复选框：

以下是 HTML

<input type="checkbox" name="checkb" id="Agent" value="Agent"> type=Agent
<br />

  <input type="checkbox" name="checkb" id="Customer" value="Customer"> type=Customer
<br />

  <input type="checkbox" name="checkb" id="Phone" value="Phone"> type=Phone
<br />

  <input type="checkbox" name="checkb" id="ID_Card" value="ID_Card"> type=ID_Card
<br />

<input type=datetime id="Start_Date" value="" placeholder="Start_Date" />
<input type=datetime id="End_Date" value="" placeholder="End_Date" />
<button id="date">
  Interval
</button>

点击 Interva l按钮，如果选中任何复选框，则应取消选中。

以下是时间间隔按钮的事件监听器：

var check1 = document.getElementById("Agent");
var check2 = document.getElementById("Customer");
var check3 = document.getElementById("Phone");
var check4 = document.getElementById("ID_Card");

var newBtn = document.getElementById("date");
if (newBtn) {
  newBtn.addEventListener("click", function() {

    if (check1.checked) {
      var ischecked1 = check1.checked;

      check1.checked != ischecked1;
    }
    if (check2.checked) {
      var ischecked2 = check2.checked;

      check2.checked != ischecked2;

    }

    if (check3.checked) {
      var ischecked3 = check3.checked;

      check3.checked != ischecked3;
    }
    if (check4.checked) {
      var ischecked4 = check4.checked;

      check4.checked != ischecked4;

    }
  });
}

下面的代码运行没有任何错误，但如果选中它们，则不会取消选中这些框。

以下是fiddle

Answer 1

您的陈述只是评估为布尔值，而不是执行分配：

check1.checked != ischecked1; // this returns a boolean, doesn't do any assignment

您希望这样做以切换选中状态：

check1.checked = !ischecked1;

其他复选框也是如此。

也没有必要创建额外的变量，你可以直接进行切换和阅读：

check1.checked = !check1.checked;

由于您只选中了复选框，因此您也可以直接将它们设置为false。

if (check1.checked) check1.checked = false;

您可以使用数组迭代进行切换，而不是使用if语句：

[check1, check2, check3, check4].forEach(check => {
  if (check.checked) {
    check.checked = false;
  }
});

// or query the checkboxes directly and do the same
[...document.querySelectorAll('input[type="checkbox"]')].forEach(check => {
  if (check.checked) {
    check.checked = false;
  }
});

Answer 2

根据它的外观，你只想点击按钮取消选中所有内容

你可以这样做

var newBtn = document.getElementById("date");
if (newBtn) {
    newBtn.addEventListener("click", function() {
      document.getElementById("Agent").checked =   
      document.getElementById("Customer").checked =
      document.getElementById("Phone").checked =
      document.getElementById("ID_Card").checked = false;
  });
}

Answer 3

你的错误在于这一行：

check1.checked != ischecked1;

这实际上意味着“比较check1.checked是否等于缺血1”。

最简单的解决方案是删除if语句，然后执行此操作：

check1.checked = !check1.checked

这意味着“将check1.checked设置为check1.checked的反面”。

由于所有复选框都具有相同的名称，您还可以通过按名称请求它们来收集所有复选框，并使用循环来遍历它们。一个小例子：

// Collect all checkboxes with a CSS selector that matches all input
// elements with a name attribute that's equal to "checkb"
var checkboxes = document.querySelectorAll('input[name="checkb"]');

var newBtn = document.getElementById("date");
if (newBtn) {
  newBtn.addEventListener("click", function() {
    // this is a for loop, it will run for as long as i
    // is smaller than the amount of found checkboxes (checkboxes.length)
    for(var i = 0; i < checkboxes.length; i++) {
      // Get the checkbox from the checkboxes collection
      // collection[i] means get item from collection with index i
      var checkbox = checkboxes[i];

      // Revert the .checked property of the checkbox
      checkbox.checked = !checkbox.checked;
    }
  });
}

取消选中另一个按钮上的已选中复选框

3 个答案: