jquery 循环获取指定input值

原创

mob64ca12dd8bce 2024-03-27 05:06:12 ©著作权

文章标签 jQuery HTML 类名 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dd8bce的原创作品，请联系作者获取转载授权，否则将追究法律责任

循环获取指定input值的方法

在开发网页应用程序时，经常会遇到需要获取页面中多个input元素的值的情况。如果要获取指定input元素的值，并且这些input元素具有相同的类名或其他共同的特征，那么可以使用jQuery来实现这个功能。

jQuery简介

jQuery是一个快速、简洁的JavaScript库，可以简化HTML文档的操作、事件处理、动画效果等功能。使用jQuery可以更方便地操作DOM元素，实现动态效果，并且具有跨浏览器的特性。

循环获取指定input值的方法

假设我们有一个表单，其中包含多个input元素，它们都具有相同的类名inputVal。我们想要使用jQuery来循环获取这些input元素的值，并将这些值存储在一个数组中。

首先，我们需要在HTML文件中引入jQuery库。可以通过以下CDN方式引入jQuery：

<script src="

接下来，我们可以编写JavaScript代码来实现循环获取指定input值的功能。代码如下：

// 点击按钮触发函数
$('#btn').on('click', function() {
    var inputValues = []; // 用于存储input的值的数组
    
    // 循环遍历所有class为inputVal的input元素
    $('.inputVal').each(function() {
        var value = $(this).val(); // 获取当前input元素的值
        inputValues.push(value); // 将值添加到数组中
    });
    
    console.log(inputValues); // 打印存储的值数组
});

在上面的代码中，我们首先定义了一个空数组inputValues，用于存储获取到的input元素的值。然后使用jQuery的each()方法遍历所有class为inputVal的input元素，通过val()方法获取每个input元素的值，并将其添加到数组中。最后，在控制台中打印出存储的值数组。

示例

下面是一个简单的示例，演示了如何实现循环获取指定input值的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环获取指定input值</title>
<script src="
</head>
<body>
<input type="text" class="inputVal" value="Input 1"><br>
<input type="text" class="inputVal" value="Input 2"><br>
<input type="text" class="inputVal" value="Input 3"><br>
<button id="btn">获取input值</button>

<script>
$('#btn').on('click', function() {
    var inputValues = [];
    
    $('.inputVal').each(function() {
        var value = $(this).val();
        inputValues.push(value);
    });
    
    console.log(inputValues);
});
</script>
</body>
</html>

在上面的示例中，页面中包含三个带有inputVal类名的input元素和一个按钮。当点击按钮时，将会循环获取这三个input元素的值，并在控制台中打印出这些值。