jquery返回name相同的值

Hey小伙伴们，今天要来聊聊一个超级实用的小技巧，就是如何用jQuery来获取具有相同name属性的值，是不是听起来就有点小激动呢？别急，咱们慢慢来聊。

我们要明确一点，name属性在HTML表单元素中扮演着重要角色，它不仅帮助我们区分不同的表单元素，而且在数据提交时，name属性的值会被作为键名发送到服务器，当我们需要在客户端处理这些数据时，能够快速获取到具有相同name属性的值就显得尤为重要了。

如何用jQuery来实现这一功能呢？让我们一步步来看。

准备工作

在开始之前，确保你的页面已经引入了jQuery库，如果没有，可以通过以下方式添加：

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

获取具有相同`name`属性的值

假设我们有一个表单，其中包含了多个具有相同name属性的元素，如下所示：

<form id="myForm">
  <input type="text" name="username" value="John Doe">
  <input type="text" name="username" value="Jane Doe">
  <input type="submit" value="Submit">
</form>

我们的目标是获取所有name为username的输入框的值。

使用jQuery选择器

在jQuery中，我们可以使用$('[name="username"]')来选择所有具有name属性值为username的元素，我们可以遍历这些元素，获取它们的值。

$(document).ready(function() {
  var usernames = [];
  $('[name="username"]').each(function() {
    usernames.push($(this).val());
  });
  console.log(usernames); // 输出：["John Doe", "Jane Doe"]
});

这段代码首先等待文档加载完成，然后选择所有name为username的元素，并使用.each()方法遍历它们，对于每个元素，我们使用.val()方法获取它的值，并将其添加到usernames数组中。

处理结果

现在我们已经得到了一个包含所有具有相同name属性值的数组，我们可以根据需要对这些值进行进一步的处理，我们可以将它们显示在页面上，或者进行一些逻辑判断。

$(document).ready(function() {
  var usernames = [];
  $('[name="username"]').each(function() {
    usernames.push($(this).val());
  });
  
  // 显示用户名
  $('#result').text(usernames.join(', '));
});

我们还需要在HTML中添加一个元素来显示结果：

<div id="result"></div>

这样，当页面加载完成后，所有具有name为username的值就会被显示在#result元素中。

实际应用

这个技巧在实际开发中非常有用，在一个购物网站中，用户可以选择多个商品，每个商品都有一个数量输入框，我们可以使用相同的方法来获取所有商品的数量，然后计算总价。

<form id="cartForm">
  <div>
    商品A：<input type="text" name="quantity" value="2">
  </div>
  <div>
    商品B：<input type="text" name="quantity" value="3">
  </div>
  <input type="submit" value="结算">
</form>

$(document).ready(function() {
  var quantities = [];
  $('[name="quantity"]').each(function() {
    quantities.push(parseInt($(this).val(), 10));
  });
  
  // 计算总价
  var total = quantities.reduce(function(sum, quantity) {
    return sum + quantity;
  }, 0);
  
  console.log(total); // 输出：5
});

通过这种方式，我们可以轻松地处理具有相同name属性的表单元素，无论是获取它们的值，还是进行复杂的计算。

好了，今天的分享就到这里了，通过使用jQuery，我们可以非常方便地获取具有相同name属性的值，并进行各种处理，这不仅提高了开发效率，也使得我们的代码更加简洁和易于维护，希望这个小技巧能对你的项目有所帮助，如果你有任何疑问或想要进一步探讨，欢迎在评论区留下你的想法，我们下次再见啦！