如何使用JavaScript根据复选框的name与value生成筛选数组

注意：你给出的示例中const filters = [...]存在语法错误，数组不支持字符串键，实际筛选结果应为对象结构，完全符合你列出的键值对映射需求。

核心实现代码 #

// 选中所有已勾选的筛选复选框
const checkedBoxes = document.querySelectorAll('.filter-item--checkbox:checked');
const filters = {};

checkedBoxes.forEach(item => {
  const key = item.name;
  const val = item.value;
  // 同名分组逻辑：不存在则初始化数组，存在则追加值
  filters[key] = filters[key] ?? [];
  filters[key].push(val);
});

console.log(filters);

输出结果为：

{
  colors: ['blue', 'orange'],
  items: ['chair', 'bed'],
  material: ['plastic', 'wood']
}

如果需要兼容ES2020以下的运行环境，把filters[key] = filters[key] ?? []替换为以下代码即可：

if (!filters[key]) {
  filters[key] = [];
}

实时更新扩展 #

如果需要在用户勾选/取消勾选时自动更新筛选条件，可以绑定change事件：

const filterCheckboxes = document.querySelectorAll('.filter-item--checkbox');
let filters = {};

// 统一更新筛选条件的方法
function updateFilters() {
  filters = {};
  document.querySelectorAll('.filter-item--checkbox:checked').forEach(item => {
    filters[item.name] = filters[item.name] ?? [];
    filters[item.name].push(item.value);
  });
  // 此处可加入筛选触发逻辑
  console.log('当前筛选条件：', filters);
}

// 给每个复选框绑定变更事件
filterCheckboxes.forEach(box => {
  box.addEventListener('change', updateFilters);
});

内容的提问来源于stack exchange，提问作者Paul Myers