JavaScript checkbox筛选表格异常：重新勾选后显示全部数据如何解决？

• 原有代码每次筛选仅独立处理当前触发的复选框逻辑，没有对所有已选条件做联合的「且」校验，多个筛选条件之间逻辑互不关联，不会取交集，因此勾选多个选项时会显示符合任意一个条件的所有行，不符合预期
• 原有事件绑定代码没有正确传递event参数，部分场景下会触发事件对象未定义的异常

JS代码 #

// 统一筛选入口，每次任意复选框变更都触发全量校验
function filter() {
  // 第一步：按列收集所有已勾选的筛选值
  const filters = {
    check1: Array.from(document.querySelectorAll('.option1:checked')).map(item => item.value),
    check2: Array.from(document.querySelectorAll('.option2:checked')).map(item => item.value),
    check3: Array.from(document.querySelectorAll('.option3:checked')).map(item => item.value)
  }

  // 第二步：遍历所有表格行（跳过表头）
  const rows = document.querySelectorAll('#listingTable tr:not(:first-child)')
  rows.forEach(row => {
    let isMatch = true
    // 校验col1规则：如果该列有勾选值，行对应值必须在已选列表中
    if (filters.check1.length > 0) {
      const col1Val = row.querySelector('.check1').innerText
      if (!filters.check1.includes(col1Val)) isMatch = false
    }
    // 校验col2规则
    if (filters.check2.length > 0) {
      const col2Val = row.querySelector('.check2').innerText
      if (!filters.check2.includes(col2Val)) isMatch = false
    }
    // 校验col3规则
    if (filters.check3.length > 0) {
      const col3Val = row.querySelector('.check3').innerText
      if (!filters.check3.includes(col3Val)) isMatch = false
    }
    // 按校验结果控制行显隐
    row.style.display = isMatch ? 'table-row' : 'none'
  })
}

// 统一给所有复选框绑定筛选事件
document.querySelectorAll('.option1, .option2, .option3').forEach(input => {
  input.addEventListener('input', filter)
})

HTML代码（无需修改，和原有逻辑一致） #

<div id="input">
<label>Filter Number </label><br>
<label>1<input class="option1" type="checkbox" value="1" checked/></label>
<label>2<input class="option2" type="checkbox" value="2" checked/></label>
<label>3<input class="option3" type="checkbox" value="3" checked/></label>
</div><br>


<table id="listingTable">
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td class="check1">1</td>
    <td class="check2">4</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">1</td>
    <td class="check2">2</td>
    <td class="check3">5</td>
  </tr>
   <tr>
    <td class="check1">3</td>
    <td class="check2">2</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">2</td>
    <td class="check2">2</td>
    <td class="check3">3</td>
  </tr>
   <tr>
    <td class="check1">4</td>
    <td class="check2">6</td>
    <td class="check3">3</td>
  </tr>
 
</table>

每次复选框状态变更都会重新拉取所有已勾选的筛选条件，每行需要同时满足所有有勾选值的列的规则才会显示，完全符合「同时勾选1、2时仅展示col1=1且col2=2的行」的预期。如果某列没有勾选任何选项，默认不对该列做限制。

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