JavaScript基于checkboxlist筛选表格时无动态变化问题求助

• 筛选逻辑覆盖：两个筛选条件分开独立处理，后执行的种族筛选会直接覆盖身份筛选的行显隐结果，没有实现「身份+种族同时满足」的逻辑
• 同组复选框判断错误：同维度的复选框是多选或的关系，现有逻辑会被同组后遍历的复选框状态覆盖判断结果，比如Admin未勾选、User勾选的情况下，Admin行匹配到Admin未勾选设为隐藏，逻辑不符合多选筛选的预期
• 样式赋值不规范：直接给DOM的style属性赋值字符串属于非标准写法，部分浏览器不会生效，应该显式修改style.display属性

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

function filter() {
  // 收集身份维度已勾选的选项
  const checkedRoles = Array.from(document.getElementsByClassName("option1"))
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value.toLocaleUpperCase())
  // 收集种族维度已勾选的选项
  const checkedRaces = Array.from(document.getElementsByClassName("option2"))
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value.toLocaleUpperCase())

  // 遍历表格所有数据行（跳过表头行）
  const dataRows = document.querySelectorAll('#listingTable tr:not(:first-child)')
  dataRows.forEach(row => {
    // 读取当前行的身份和种族字段值，加trim避免空格干扰匹配
    const currentRole = row.querySelector('.check1').innerHTML.trim().toLocaleUpperCase()
    const currentRace = row.querySelector('.check2').innerHTML.trim().toLocaleUpperCase()
    // 两个筛选条件同时满足才显示该行
    const shouldShow = checkedRoles.includes(currentRole) && checkedRaces.includes(currentRace)
    row.style.display = shouldShow ? 'table-row' : 'none'
  })
}

修复后的逻辑是先统一收集两个维度的勾选值，再逐行判断是否同时满足两个筛选条件，避免了前后逻辑覆盖的问题，兼容多勾选的筛选场景。

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