表单重置 jQuery - JavaScript

在表单中，重置按钮可以重置所有表单字段到它们的默认值。如果使用 jQuery，可以通过以下方式来实现表单重置。

1. 给重置按钮添加 click 事件

首先，我们需要给重置按钮添加 click 事件，并在该事件中重置表单。可以使用 jQuery 中的 click() 方法来给按钮添加该事件。

$("#reset-btn").click(function(){
  $("#form")[0].reset();
});

上面的代码中， $("#reset-btn") 表示选择 ID 为 reset-btn 的重置按钮， $("#form") 表示选择 ID 为 form 的表单元素。.reset() 方法用于重置表单。

要注意的是，我们使用了 [0] 来获取表单元素的原生 DOM 对象。这是因为 reset() 方法只可用于原生 DOM 对象，而不是 jQuery 对象。

2. 表单元素的默认值

在上面的示例中，我们使用了 .reset() 方法来重置表单。但是，该方法重置的是表单元素的默认值，而不是输入框中的实际值。

如果您想要重置输入框中的实际值，可以使用以下代码。

$("#reset-btn").click(function(){
  $("#form input").val("");
});

上面的代码中，$("#form input") 表示选择 ID 为 form 的表单中的所有输入框，.val(""") 方法用于将输入框的值设置为空字符串。

3. 重置表单时特定输入框的处理

有时候，我们需要在重置表单时特殊处理某些输入框。例如，我们想在重置表单时将某个输入框的值设置为特定值。

$("#reset-btn").click(function(){
  $("#form")[0].reset();
  $("#special-input").val("default value");
});

上面的代码中，$("#special-input") 表示选择 ID 为 special-input 的输入框，.val("default value") 方法用于将输入框的值设置为 "default value"。

4. 总结

在本文中，我们介绍了如何使用 jQuery 实现表单重置。具体来说，我们学习了如何给重置按钮添加 click 事件、重置表单元素的默认值、重置表单时特定输入框的处理等内容。