当前位置：首页 > JavaScript

js 实现重置

2026-03-14 14:13:59JavaScript

重置表单

使用DOM的reset()方法可以重置表单内的所有输入元素。适用于通过<form>标签包裹的表单控件。

document.getElementById('myForm').reset();

清空输入字段值

通过遍历表单元素并手动设置值为空字符串，适用于需要部分重置或非表单包裹的场景。

const inputs = document.querySelectorAll('input, textarea, select');
inputs.forEach(element => {
  if (element.type !== 'submit' && element.type !== 'button') {
    element.value = '';
  }
});

重置复选框和单选按钮

单独处理复选框和单选按钮的选中状态重置，确保恢复到未选中状态。

document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(checkbox => {
  checkbox.checked = false;
});

恢复默认选择项

对于<select>下拉菜单，通过设置selectedIndex属性恢复到默认选项。

document.querySelectorAll('select').forEach(select => {
  select.selectedIndex = 0;
});

使用表单的默认值

通过读取元素的defaultValue或defaultChecked属性恢复初始值，适用于需要保留HTML原始默认值的场景。

document.querySelectorAll('input, textarea').forEach(element => {
  if ('defaultValue' in element) {
    element.value = element.defaultValue;
  }
});
document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(element => {
  element.checked = element.defaultChecked;
});

动态创建重置按钮

通过编程方式创建重置按钮并绑定事件，适合需要动态控制的场景。

js 实现重置

const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';
resetButton.addEventListener('click', () => {
  document.forms[0].reset();
});
document.body.appendChild(resetButton);

标签: js