javascript - 取消选中某些复选框后重置表单

Question

我想在初始选择后取消选中第一个字段集中的复选框后重置表单。

如何使用 vanilla JavaScript 实现这一目标？

<form>
<fieldset>
<label><input type="checkbox" name="foo">Apples</label>
<label><input type="checkbox" name="foo">Oranges</label>
</fieldset>

<fieldset>
<label><input type="radio" name="bar">Red</label>
<label><input type="radio" name="bar">Blue</label>
</fieldset>
</form>

Answer 1

您可以为每个复选框添加一个点击事件处理程序，并检查当前复选框是否被选中。如果没有，检查之前是否检查过其中的任何一项，如果检查过，则使用 form.reset() 重置表单。

const checkboxes = document.querySelectorAll("input[type=checkbox]");
const form = document.querySelector("form");
var checkedOne = false;

Array.prototype.slice.call(checkboxes).forEach(function(checkbox) {
 checkbox.addEventListener("click", function(e) {
  if (this.checked) {
   checkedOne = true;
  } else {
   if (checkedOne && !document.querySelectorAll("input[type=checkbox]:checked").length) {
    form.reset();
   }
  }
 });
});

<form>
<fieldset>
<label><input type="checkbox" name="foo">Apples</label>
<label><input type="checkbox" name="foo">Oranges</label>
</fieldset>

<fieldset>
<label><input type="radio" name="bar">Red</label>
<label><input type="radio" name="bar">Blue</label>
</fieldset>
</form>