正文

jquery获取所有input框的value

小编
小编 V管理员 /0 评论 /10 阅读
0204
欧意国内注册

jQuery获取input值的方法

在网页开发中，我们经常需要获取用户输入的数据，例如用户名、密码等，在JavaScript中，我们可以使用原生的DOM操作来获取input的值，但是这种方式比较繁琐，而jQuery作为一个轻量级的JavaScript库，提供了更加简洁的方式来获取input的值，本文将介绍如何使用jQuery获取input的值。

1、获取单个input的值

要获取单个input的值，可以使用jQuery的val()方法，需要为input元素添加一个id属性，以便后续通过该id获取元素，使用jQuery选择器选中该元素，并调用val()方法获取其值。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取input值示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="username">
    <button id="getValue">获取值</button>
    <script>
        $("#getValue").click(function() {
            var username = $("#username").val();
            alert("用户名：" + username);
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个文本输入框和一个按钮，当点击按钮时，会弹出一个提示框显示输入框中的值，我们使用$("#username")选择器选中id为username的input元素，并调用val()方法获取其值。

2、获取多个input的值

如果要获取多个input的值，可以使用jQuery的map()方法。map()方法可以遍历一个jQuery对象集合，并对每个元素执行指定的函数，最后返回一个新的数组，我们可以在函数中调用val()方法获取每个input的值。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取多个input值示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" class="username">
    <input type="text" class="username">
    <button id="getValues">获取值</button>
    <script>
        $("#getValues").click(function() {
            var usernames = $(".username").map(function() {
                return $(this).val();
            }).get();
            alert("用户名：" + usernames.join(", "));
        });
    </script>
</body>
</html>

在这个示例中，我们创建了两个文本输入框和一个按钮，当点击按钮时，会弹出一个提示框显示所有输入框中的值，我们使用$(".username")选择器选中class为username的所有input元素，并使用map()方法遍历它们，在函数中调用val()方法获取每个input的值，并使用get()方法将其转换为一个数组，使用join()方法将数组中的元素连接成一个字符串，并显示在提示框中。