如何基于复选框状态灵活过滤对象数组？现有硬编码方案难以扩展

你当前的硬编码过滤逻辑扩展性太差，要实现支持任意复选框的动态过滤，可以通过给复选框添加自定义数据属性来关联数据字段和对应值，再动态生成过滤条件，具体步骤如下：

1. 修改HTML：添加数据属性 #

给每个过滤复选框加上data-field（对应数据对象的字段名，比如var1）和data-value（对应字段的目标值，比如A），不用再依赖ID解析字段和值：

<h1>Var 1</h1>
<input class="filter-checkbox" type="checkbox" id="checkTest1-A" data-field="var1" data-value="A" checked/>
<label for="checkTest1-A">Include A</label>
<input class="filter-checkbox" type="checkbox" id="checkTest2-B" data-field="var1" data-value="B" checked/>
<label for="checkTest2-B">Include B</label>

<h1>Var 2</h1>
<input class="filter-checkbox" type="checkbox" id="checkTest8-C" data-field="var2" data-value="C" checked/>
<label for="checkTest8-C">Include C</label>
<input class="filter-checkbox" type="checkbox" id="checkTest7-D" data-field="var2" data-value="D" checked/>
<label for="checkTest7-D">Include D</label>

<h1>Update</h1>
<button id="update-btn">Change Selections</button>

2. 改写JavaScript：动态生成过滤规则 #

不再硬编码字段和值的对应关系，通过数据属性收集选中状态，再动态过滤：

const updateBtn = document.getElementById("update-btn");
const fullData = [
  {"var1": "A", "var2": "C"},
  {"var1": "B", "var2": "C"},
  {"var1": "A", "var2": "D"},
  {"var1": "B", "var2": "D"}
];

updateBtn.addEventListener('click', () => {
  // 收集所有复选框的选中状态，按字段分组
  const filterRules = {};
  document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
    const field = checkbox.dataset.field;
    const value = checkbox.dataset.value;
    
    // 初始化字段对应的选中值数组
    if (!filterRules[field]) {
      filterRules[field] = [];
    }
    // 复选框选中时，将对应值加入规则
    if (checkbox.checked) {
      filterRules[field].push(value);
    }
  });

  // 动态过滤数据：每个字段的值必须在对应选中值数组中
  const newData = fullData.filter(item => {
    // 遍历所有字段规则，只要有一个字段不满足就排除当前对象
    return Object.entries(filterRules).every(([field, allowedValues]) => {
      // 字段未选中任何值时，直接不匹配
      if (allowedValues.length === 0) return false;
      // 检查当前对象的字段值是否在允许范围内
      return allowedValues.includes(item[field]);
    });
  });

  console.log('过滤结果:', newData);
});

方案优势 #

• 完全可扩展：新增复选框时，只需添加对应的data-field和data-value属性，无需修改JavaScript逻辑
• 逻辑清晰：通过数据属性直接关联UI和数据，避免硬编码的映射关系
• 易于维护：后续调整字段或值时，只需修改HTML，不用改动过滤核心逻辑

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