javascript - 取消选中另一个按钮上的选中复选框单击

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>

点击间隔l按钮，如果任何复选框被选中，它们应该被取消选中。

下面是 Interval 按钮的事件监听器:

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

您的语句只是作为 bool 值求值，而不是执行赋值:

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