当前位置：首页 > jquery

jquery清空form表单

2026-02-04 07:48:51jquery

清空表单的方法

使用jQuery清空表单可以通过多种方式实现，以下是几种常见且有效的方法：

方法一：使用trigger()方法重置表单

$("#formId").trigger("reset");

该方法会触发表单的reset事件，将表单恢复到初始状态。适用于包含默认值的表单。

方法二：使用val()清空输入字段

$("#formId :input").val('');

选择表单内所有:input元素（包括input/select/textarea等），将其值设为空字符串。这种方法会保留占位符文本。

方法三：逐个字段类型处理

$("#formId input[type='text'], #formId textarea").val('');
$("#formId input[type='radio'], #formId input[type='checkbox']").prop("checked", false);
$("#formId select").prop("selectedIndex", 0);

针对不同类型的表单元素分别处理：

文本框/文本域设为空值
单选/复选框取消选中状态
下拉框重置为第一个选项

方法四：使用each()遍历清空

$("#formId").find(':input').each(function() {
  $(this).val('');
});

通过遍历表单内所有输入元素逐个清空，适用于需要额外处理逻辑的场景。

注意事项

文件上传字段(type="file")无法通过JavaScript清空，这是浏览器安全限制
使用val('')会保留HTML5的placeholder属性显示
对于动态生成的表单内容，确保选择器能正确匹配所有目标元素
单选框/复选框需要使用prop()方法而非val()

完整示例代码

function clearForm(formId) {
  const $form = $(`#${formId}`);
  $form.trigger("reset");
  $form.find(':input').not(':button, :submit, :reset, :hidden').val('');
  $form.find(':radio, :checkbox').prop('checked', false);
  $form.find('select').prop('selectedIndex', 0);
}

这个综合函数结合了多种方法，可以处理绝大多数表单清空需求。调用时只需传入表单的ID即可。

jquery清空form表单