JS清空表单数据的两种方式:遍历元素与reset按钮
作者:像素猫时间:2026-10-28 12:56:36浏览:427
本文介绍两种在JavaScript中清空表单数据的方法。第一种通过遍历页面元素,根据类型(如text、password、radio)手动重置值或勾选状态。第二种方法是通过触发隐藏的reset按钮的点击事件,利用浏览器原生机制清空表单。
遍历页面元素清空表单
方法一:遍历页面元素
/*
清空FORM表单内容 id:表单ID*/
function ClearForm(id) {
var objId = document.getElementById(id);
if (objId == undefined) {
return;
}
for (var i = 0; i < objId.elements.length; i++) {
if (objId.elements[i].type == "text") {
objId.elements[i].value = "";
}
else if (objId.elements[i].type == "password") {
objId.elements[i].value = "";
}
else if (objId.elements[i].type == "radio") {
objId.elements[i].checked = false;
}
else if (objId.elements[i].type == "checkbox") {
objId.elements[i].checked = false;
}
else if (objId.elements[i].type == "select-one") {
objId.elements[i].options[0].selected = true;
}
else if (objId.elements[i].type == "select-multiple") {
for (var j = 0; j < objId.elements[i].options.length; j++) {
objId.elements[i].options[j].selected = false;
}
}
else if (objId.elements[i].type == "textarea") {
objId.elements[i].value = "";
}
//else if (objId.elements[i].type == "file") {
// //objId.elements[i].select();
// //document.selection.clear();
// // for IE, Opera, Safari, Chrome
// var file = objId.elements[i];
// if (file.outerHTML) {
// file.outerHTML = file.outerHTML;
// } else {
// file.value = ""; // FF(包括3.5)
// }
//}
}
}
利用 reset 按钮清空表单
方法二:使用 reset 按钮
在页面中增加一个隐藏的 reset 类型输入框。
<!--用来清空表单数据-->
<input type="reset" name="reset" style="display: none;" />
通过代码触发该 reset 按钮的点击事件,从而实现清空表单数据的效果。
$("input[type=reset]").trigger("click");
作者最新文章
vtk.js 渲染窗口黑屏或无内容显示的常见原因及排查
2026-11-05 17:30:30
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
