如何从 Javascript 中复选框的名称和值创建一个数组？答案

【问题标题】：How can I create an array from names and values of checkboxes in Javascript?如何从 Javascript 中复选框的名称和值创建一个数组？
【发布时间】：2021-11-02 17:08:06
【问题描述】：

想象一下，我有一组选中的复选框。每个都有一个与过滤器对应的值和名称。

<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">

我怎样才能将这些排序到一个数组中，如下所示？

const filters = [
 'colors': [ 'blue', 'orange'],
 'items': ['chair', 'bed'],
 'material': ['plastic', 'wood'],
]

【问题讨论】：

您可能希望将您的代码放入jsfiddle.net 并在此处提供代码的链接，以便观众可以查看问题并可能帮助您更轻松地解决问题。
目标结构无效。 OP 可能会使用一个对象，其中每个条目都具有键（例如“颜色”、“项目”、“材料”）和相关的值数组。
@PaulMyers ... 在 SO 这被认为是得到帮助的人的一个很好的姿态，提供一些反馈和/或对答案进行投票和/或接受最重要的答案有助于解决 OP 的问题。
@PeterSeliger 好吧，我已经感谢了这个人，我使用了他的帮助。我需要 15 个代表点才能对任何答案进行投票，所以我还不能这样做，否则我会的。还有什么？
@PaulMyers ... 如果您接受（“...和/或接受答案”）Nina 的回答，那就太好了。每个答案旁边都有一个接受链接/按钮；不需要特权。

标签： javascript arrays object

【解决方案1】：

您可以获取元素并构建数组对象。

const result = {};

for (const { name, value } of document.getElementsByClassName('filter-item--checkbox')) {
    (result[name] ??= []).push(value);
}

console.log(result);

<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">

【讨论】：

这很好用。谢谢！

【解决方案2】：

对于 OP 的用例，据说解决方案应该针对刚刚选中的复选框控件，可以/应该使用FormData Web-API 及其entries 方法以及reduce 任务。将表单引用直接传递到 FormData 构造函数可确保只有活动控件数据成为表单数据对象的一部分。因此，未选中的复选框控件的名称/键和值不会被表单数据对象反映。

const formData = new FormData(document.forms[0]);
console.log(
  Array
    .from(
      formData.entries()
    )
    .reduce((result, [key, value]) => {

      const groupedValueList = (result[key] ??= []);
      groupedValueList.push(value);

      return result;

    }, {})
);

.as-console-wrapper { min-height: 85%!important; }

<form>
  <input type="checkbox" name="colors" value="blue" checked/>
  <input type="checkbox" name="colors" value="orange" checked/>
  <input type="checkbox" name="items" value="chair" checked/>
  <input type="checkbox" name="items" value="bed" checked/>
  <input type="checkbox" name="material" value="plastic" checked/>
  <input type="checkbox" name="material" value="wood" checked/>
</form>

如果要收集所有分组的复选框值，而不管它们的 checked 状态如何，只需要稍微改变上述方法...

console.log(
  Array
    .from(
      document.querySelectorAll('form [type="checkbox"]')
    )
    .reduce((result, { name:key, value }) => {

      const groupedValueList = (result[key] ??= []);
      groupedValueList.push(value);

      return result;

    }, {})
);

.as-console-wrapper { min-height: 85%!important; }

<form>
  <input type="checkbox" name="colors" value="blue" checked/>
  <input type="checkbox" name="colors" value="orange"/>
  <input type="checkbox" name="items" value="chair" checked/>
  <input type="checkbox" name="items" value="bed"/>
  <input type="checkbox" name="material" value="plastic" checked/>
  <input type="checkbox" name="material" value="wood"/>
</form>

【讨论】：