正文

学会一招！轻松用jQuery清空表单所有值，告别手动清空烦恼

/0 浏览量
0401

在网页开发中，表单是用户输入数据的重要部分。然而，有时候我们可能需要清空表单中的所有值，以便用户重新输入。手动清空每个输入框既费时又容易出错。今天，我将教大家如何使用jQuery轻松实现这一功能。

1. 准备工作

首先，确保你的网页中已经引入了jQuery库。如果没有，可以通过以下代码添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 清空表单的方法

使用jQuery，我们可以通过以下方法清空表单中的所有值：

$(document).ready(function() {
    $("#clearForm").click(function() {
        $("#myForm").trigger("reset");
    });
});

这里，我们创建了一个按钮，当点击这个按钮时，会触发一个事件，清空表单中的所有值。

3. HTML结构

接下来，我们需要创建一个表单，并为它添加一个按钮：

<form id="myForm">
    <input type="text" name="username" value="用户名">
    <input type="password" name="password" value="密码">
    <input type="submit" value="登录">
    <button id="clearForm">清空表单</button>
</form>

在这个例子中，我们创建了一个包含用户名和密码输入框的表单，以及一个用于清空表单的按钮。

4. 完整示例

将以上代码组合在一起，我们得到以下完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清空表单示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#clearForm").click(function() {
                $("#myForm").trigger("reset");
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" value="用户名">
        <input type="password" name="password" value="密码">
        <input type="submit" value="登录">
        <button id="clearForm">清空表单</button>
    </form>
</body>
</html>

当你打开这个HTML文件时，你可以看到表单和清空按钮。点击清空按钮，表单中的所有值都会被清空。

5. 总结

通过使用jQuery，我们可以轻松地清空表单中的所有值。这种方法不仅简单易用，而且可以提高开发效率。希望这篇文章能帮助你解决手动清空表单的烦恼。

-- 展开阅读全文 --