当前位置:首页 > 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实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现图

js实现图

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

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…