Question

我有一个带有16个数字输入的表单，我编写了一个“ click”函数，如下所示：

$("#continue").click(function (e) {
      var mealOption = $("input[name='option[]']").val();
      console.log(mealOption);
}

尽管所有16个输入都使用相同的名称：option []，但这仅返回1个值，无论我输入多少个输入，它只会返回1个值，这是输入列表中的第一个值。

我哪里出错了？

非常感谢！

Answer 1

根据.val()方法上的official jQuery doc：

获取匹配集中第一个元素的当前值元素或设置每个匹配元素的值。

这意味着当您的DOM搜索查询返回一个集合时，只会选择第一个元素进行处理。

但是，如果您在<input>中拥有所有<form>元素，则可以使用.serialize()或.serializeArray()：

$('form').on('submit', function (event) {
  event.preventDefault();
  event.stopPropagation();

  const v = $(this).serializeArray();
  $('.values').text(JSON.stringify(v, null, '  '));
});

.values {
  font-family: monospace;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <form>
    <input type="text" name="option" placeholder="input 1" />
    <input type="text" name="option" placeholder="input 2" />
    <input type="text" name="option" placeholder="input 3" />
    <button type="submit">get values</button>
  </form>
  <pre class="values">input values...</pre>
</body>

否则，您将执行以下操作：

$('input[name="option"]').each(function () { console.log($(this).val()); });

Answer 2

您需要遍历这16个项目。

$("input[name='option[]']").each(function(opt) {
  var mealOption = opt.val();
  console.log(mealOption);
});

$("input[name='option[]']")将获得全部16个项目，但当您调用.val()时，jQuery会选择第一个项目（在幕后）。

选择所有具有相同名称的输入将返回1个值

2 个答案: