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

标签 javascript html forms

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

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

最佳答案

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

关于javascript - 取消选中某些复选框后重置表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51901967/

相关文章:

php - mysql_connect()打开的数据库连接如何关闭?

javascript - onSubmit 按钮不会加载位置

mysql - 'ER_PARSE_ERROR' 因为 ?在使用 MySQL 的 url 参数中

php - 在同一页面上的 php 和 javascript 之间共享数据

javascript - 如何访问内框Html?

javascript - 如何更改 SVG 元素上的曲线

html - CSS:我将如何选择特定文本并将其隐藏

javascript - Typeahead.js 不返回任何内容

javascript - 没有互联网时如何显示自定义错误消息

javascript - js删除提交的表单数据