如何用jQuery的.reset()方法重置一个表单

当表单中输入的内容需要重置或清空时，可以使用jQuery的.reset()方法，它可以重置表单中所有元素的值为默认值。

步骤如下：

1. 在HTML文件中引入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 给需要重置的表单添加一个id：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="button" value="Reset" id="resetBtn">
</form>

1. 使用jQuery选择表单，并为重置按钮绑定一个事件处理函数：

$(document).ready(function () {
  $('#resetBtn').click(function () {
    $('#myForm').reset();
  });
});

这里使用了document.ready函数来在页面加载完毕后执行代码，选择#resetBtn按钮并绑定了click事件处理函数。在函数内，使用jQuery的reset()方法重置表单。

示例1：点击查看

示例2：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Yuchy"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="[e-mail]"><br><br>
  <input type="button" value="Reset" id="resetBtn">
</form>

$(document).ready(function () {
  $('#resetBtn').click(function () {
    $('#myForm')[0].reset();
  });
});

这里同样使用了reset()方法，但是选择表单的方式是使用了数组的方式。因为表单本质上是一个HTMLFormElement对象，它有自己的reset()方法。如果我们通过jQuery选择表单，它返回的是一个jQuery对象，不能直接调用reset()方法。所以这里使用了数组的方式来选择表单，并通过[0]获取表单的DOM对象来调用reset()方法。

示例2：点击查看