代码之家 › 专栏 › 技术社区 › Tzar

取消选中某些复选框后重置窗体

forms html javascript

Tzar · 技术社区 · 7 年前

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

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

4 回复 | 直到 7 年前

Tzar 7 年前

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

Charles Loder 7 年前

另一种使用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>

Willem van der Veen 7 年前

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

-2

Scott Marcus 7 年前

假设顶部字段集中可以有更多的复选框,而其他字段中可以有许多单选按钮,则可以尝试执行以下操作:-

 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>