Jquery：如何使用数组名称获取输入元素的所有值？

Question

我的 html 代码如下所示：

<input type="text" name="fruits[apple]" value="true">
<input type="text" name="fruits[orange]" value="false">
<input type="text" name="fruits[mango]" value="true">

如何选择所有水果并获得它们各自的值？我正在寻找类似的对象

{
  "apple": true,
  "orange": false,
  "mango": true
}

Answer 1

您可以选择以fruits[ 开头的元素，并映射到它们的值：

const vals = $('[name^="fruits["]')
  .map((_, input) => input.value)
  .get();
console.log(vals);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="fruits[apple]" value="true">
<input type="text" name="fruits[orange]" value="false">
<input type="text" name="fruits[mango]" value="true">

请记住，输入的.value 是字符串 - 如果您需要布尔值，则必须更明确地这样做：

const vals = $('[name^="fruits["]')
  .map((_, input) => input.value === 'true')
  .get();
console.log(vals);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="fruits[apple]" value="true">
<input type="text" name="fruits[orange]" value="false">
<input type="text" name="fruits[mango]" value="true">

如果您还需要name 的唯一部分，则将reduce 放入键值对对象中（如果使用reduce，还可以删除jQuery）：

const vals = [...document.querySelectorAll('[name^="fruits["]')]
  .reduce((a, { name, value }) => {
    const key = name.match(/[^[]+(?=\])/)[0];
    a[key] = value === 'true';
    return a;
  }, {});
console.log(vals);

<input type="text" name="fruits[apple]" value="true">
<input type="text" name="fruits[orange]" value="false">
<input type="text" name="fruits[mango]" value="true">