Question

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

如何使用香草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

您可以将click事件处理程序添加到每个复选框，并检查是否选中了当前复选框。如果没有，请检查之前是否已检查过其中任何一个，如果已检查过，请使用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>

Answer 2

使用form.reset方法：

let checkBoxes = document.querySelectorAll("input[type=checkbox]");

for (let checkbox of checkBoxes) {
   checkbox.addEventListener('change', change)
}


function change() {
    if(!checkBoxes[0].checked && !checkBoxes[1].checked){
       document.getElementById('formID').reset();
    }
}

<form id="formID">
<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 3

使用eventListener的另一种方法

var form = document.querySelector("form");
var fieldset1 = document.getElementById("fieldset1");
var fieldset2 = document.getElementById("fieldset2");
var box1 = fieldset1.elements[0];
var box2 = fieldset1.elements[1];
form.addEventListener('click', function(){
	if( !box1.checked &&  !box2.checked) {
    let radio = document.getElementsByName('bar');
    radio[0].checked = false;
    radio[1].checked = false;
  }
})

<form>
<fieldset id="fieldset1">
<label><input type="checkbox" name="foo">Apples</label>
<label><input type="checkbox" name="foo">Oranges</label>
</fieldset>

<fieldset id="fieldset2">
<label><input type="radio" name="bar">Red</label>
<label><input type="radio" name="bar">Blue</label>
</fieldset>
</form>

Answer 4

假设顶部字段集中可以有更多复选框，而其他字段中可以有很多单选按钮，则可以尝试以下操作：-

 let masterCheckboxes = document.querySelectorAll("#master input");
 
 	masterCheckboxes.forEach(function(ele){
 	ele.addEventListener("change", function(){
    var allUnchecked = true;
      masterCheckboxes.forEach(function(ele){
        if(ele.checked)
          allUnchecked = false;

      })
      if(allUnchecked){
        document.querySelectorAll('.other input').forEach(function(ele){
          ele.checked = false;
        })
      }
	});
	
})

<form>
  <fieldset id="master">
  <label><input type="checkbox" name="foo">Apples</label>
  <label><input type="checkbox" name="foo">Oranges</label>
  </fieldset>

  <fieldset class="other">
  <label><input type="radio" name="bar">Red</label>
  <label><input type="radio" name="bar">Blue</label>
  </fieldset>
</form>

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

4 个答案: