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>

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>

Answer 2

您可以使用querySelectorAll()来获取表单中具有所需name属性的所有元素：

var elements = myForm.querySelectorAll('[name="collection"]');

然后遍历元素。

Answer 3

您必须使函数保持代码清晰和易于管理：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
function Check(val){
	Array.from(checkboxes, function(e){
		e.checked = val
	})	
}
Check(true)

<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>

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

3 个答案: