纯JavaScript表格复选框多条件联合过滤功能异常问题咨询

• 原有逻辑仅针对当前操作的单个复选框修改对应行的显隐，未全局校验所有过滤条件的联合匹配规则
• 未收集所有已勾选的过滤选项集合，导致后操作的复选框会覆盖之前的过滤结果

HTML代码无需修改，仅替换JS部分即可：

function filter() {
  // 收集所有已勾选的过滤条件集合
  const checkedNames = Array.from(document.querySelectorAll('.option1:checked')).map(input => input.value.toUpperCase())
  const checkedRaces = Array.from(document.querySelectorAll('.option3:checked')).map(input => input.value.toUpperCase())
  
  // 获取所有表格数据行（排除表头）
  const tableRows = document.querySelectorAll('#listingTable tr:not(:first-child)')

  // 逐行校验所有过滤条件
  tableRows.forEach(row => {
    const rowName = row.querySelector('.check1').textContent.toUpperCase()
    const rowRace = row.querySelector('.check3').textContent.toUpperCase()
    // 同时匹配所有勾选条件才展示
    if (checkedNames.includes(rowName) && checkedRaces.includes(rowRace)) {
      row.style.display = 'table-row'
    } else {
      row.style.display = 'none'
    }
  })
}

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

• 每次触发过滤时先全局收集所有已勾选的姓名、人种选项，形成两个独立的条件集合
• 遍历所有数据行，逐行校验是否同时满足两个维度的过滤要求，避免单个操作覆盖之前的过滤结果
• 简化了事件绑定逻辑，所有复选框共用同一套过滤规则，后续新增过滤维度时只需新增对应条件集合和校验规则即可

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