js实现重置
重置表单元素
使用 HTMLFormElement.reset() 方法可以快速重置表单内的所有输入元素到默认值。适用于 <form> 标签内的输入框、下拉框等。
document.getElementById('myForm').reset();
清空输入框或特定元素
通过直接修改 value 或 innerHTML 属性清空指定元素的内容。
// 清空输入框
document.getElementById('inputField').value = '';
// 清空 div 内容
document.getElementById('contentDiv').innerHTML = '';
重置对象或变量
将变量或对象重新赋值为初始值(如空对象、空数组或默认值)。
let userData = { name: 'John', age: 30 };
userData = {}; // 重置为空对象
let items = [1, 2, 3];
items = []; // 重置为空数组
重置复选框或单选按钮
遍历复选框或单选按钮组,将 checked 属性设为 false。
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = false;
});
重置下拉框
将 <select> 元素的 selectedIndex 设为 0(默认选项)。
document.getElementById('dropdown').selectedIndex = 0;
使用事件监听触发重置
通过按钮点击或其他事件触发重置逻辑。

document.getElementById('resetButton').addEventListener('click', () => {
document.getElementById('myForm').reset();
});
注意事项
- 表单重置仅恢复默认值,不会清空用户动态输入的内容(除非默认值为空)。
- 直接操作
value或innerHTML适用于非表单元素或需要强制清空的场景。






