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">

jQuery：如何获取具有数组名称的input元素的所有值？

1 个答案: