javascript - 通过“名称”而不是“id”定位多个复选框

Question

我需要取消选中字段集中所有选中的复选框。我知道如何使用多种getElementById方法手动完成，但我想使用单个getElementsByName. 如何更简洁地表达下面的代码？

… else {
  document.getElementById("foo").checked = false
  document.getElementById("bar").checked = false
  document.getElementById("baz").checked = false
}

---

<fieldset>
  <input type=checkbox name=collection id=foo>
  <label for=foo>Foo</label>

  <input type=checkbox name=collection id=bar>
  <label for=bar>Bar</label>

  <input type=checkbox name=collection id=baz>
  <label for=baz>Baz</label>
</fieldset>

标签： javascriptforms

Answer 1

您可以通过 获取所有复选框document.querySelectorAll，并.forEach用于更改集合中每个复选框的状态。

btn.addEventListener("click", () => {
  let checkboxes = document.querySelectorAll('fieldset > input[name="collection"]:checked');

  checkboxes.forEach(e => e.checked = false); // for example set other checked state.
});

<fieldset>
  <input type=checkbox name=collection id=foo>
  <label for=foo>Foo</label>

  <input type=checkbox name=collection id=bar checked>
  <label for=bar>Bar</label>

  <input type=checkbox name=collection id=baz checked>
  <label for=baz>Baz</label>
</fieldset>

<button id="btn">Change state</button>