📅 最后修改于: 2023-12-03 15:16:50.328000 🧑 作者: Mango
在网页开发中，表单是我们经常会遇到的一种交互控件。当用户在表单中填写数据后，我们可能需要在某些情况下将表单内容重置为初始状态，方便用户重新填写。jQuery提供了一个简单的方法，使我们可以轻松地重置表单。
要重置表单，可以使用jQuery的 reset() 方法。这个方法会将表单中所有的表单元素的值都重置为它们的默认值。
$('#myForm')[0].reset();
上面的代码中，#myForm 是表单的ID。我们首先通过 $('#myForm') 获取表单元素的jQuery对象，然后使用 [0] 来获取DOM元素，最后调用 reset() 方法来重置表单。
在有些情况下，我们需要在点击某个按钮或链接时重置表单。为了实现这个功能，我们可以为按钮或链接添加一个点击事件，然后在事件处理程序中调用 reset() 方法。
$('#resetBtn').click(function() {
$('#myForm')[0].reset();
});
上面的代码添加了一个点击事件处理程序，当用户点击ID为 resetBtn 的按钮时，会执行表单重置的代码。这里我们仍然使用了之前的代码来重置表单。
以下是一个完整的示例，展示了如何重置表单：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 重置表单</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function() {
// 为按钮添加点击事件
$('#resetBtn').click(function() {
// 重置表单
$('#myForm')[0].reset();
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" value="">
<label for="age">年龄：</label>
<input type="number" id="age" name="age" value="">
<input type="submit" value="提交">
<input type="button" id="resetBtn" value="重置">
</form>
</body>
</html>
上面的代码中，我们添加了一个表单，其中包含两个输入框和两个按钮。其中一个按钮的ID为 resetBtn，用于重置表单。我们使用jQuery为按钮添加了点击事件处理程序，当用户点击该按钮时，会执行表单重置的代码。