当前位置:首页 > JavaScript

js实现重置

2026-03-15 01:13:32JavaScript

重置表单元素

使用 HTMLFormElement.reset() 方法可以快速重置表单内的所有输入元素到默认值。适用于 <form> 标签内的输入框、下拉框等。

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

清空输入框或特定元素

通过直接修改 valueinnerHTML 属性清空指定元素的内容。

// 清空输入框
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;

使用事件监听触发重置

通过按钮点击或其他事件触发重置逻辑。

js实现重置

document.getElementById('resetButton').addEventListener('click', () => {
  document.getElementById('myForm').reset();
});

注意事项

  • 表单重置仅恢复默认值,不会清空用户动态输入的内容(除非默认值为空)。
  • 直接操作 valueinnerHTML 适用于非表单元素或需要强制清空的场景。

标签: js
分享给朋友:

相关文章

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js实现跑马灯

js实现跑马灯

实现跑马灯效果 使用HTML和JavaScript可以轻松实现跑马灯效果。以下是两种常见的实现方式: HTML结构 <div id="marquee"> <span>…

js 多选 实现

js 多选 实现

实现多选的 JavaScript 方法 使用复选框(Checkbox)实现多选 通过 HTML 的 checkbox 元素配合 JavaScript 实现多选功能。用户可以选择多个选项,提交时获取所有…

js实现同步

js实现同步

同步与异步的概念 在JavaScript中,同步代码会按照顺序执行,每一行代码必须等待上一行代码执行完成后才能运行。异步代码则允许在等待某些操作(如网络请求)完成的同时继续执行其他代码。 实现同步的…