原生JS复选框隐藏表格行时布尔值过滤仅隐藏select选项问题求助

问题根因 #

你现在的代码存在三个核心问题：

• 你将check2类绑定在了<option>元素上，执行condt1[i].parentElement.style操作时，修改的是<option>的父元素<select>的显示状态，自然只会隐藏下拉框而非整行。你需要定位到元素所属的<tr>行元素才能隐藏整行。
• 现有筛选逻辑是单条件独立处理，没有同时校验多个筛选规则，后续同时使用名称和布尔值筛选时会出现条件覆盖的问题。
• 事件绑定时箭头函数没有传入event参数，会导致部分环境下无法正确获取触发事件的复选框元素。

修复后的代码 #

HTML修改点

给布尔值所在的<td>加上check2类，同时添加data-bool属性存储当前行对应的布尔值，避免读取下拉框内容造成混淆：

<div id="input">
  <label>Filter Name </label><br>
  <label>Human<input class="option1" type="checkbox" value="Human" checked/></label>
  <label>Robot<input class="option1" type="checkbox" value="Robot" checked/></label><br><br>
  
   <label>Filter boolean </label><br>
  <label>true<input class="option2" type="checkbox" value="true" checked/></label>
  <label>false<input class="option2" type="checkbox" value="false" checked/></label>
</div><br>
<table id="my-table">
  <thead>
    <tr>
      <th> Name </th>
      <th> boolean </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="check1">Robot</td>
      <td class="check2" data-bool="true">
        <select>
            <option>true</option>
            <option>true</option>
        </select>
      </td>
    </tr>
    <tr>
        <td class="check1">Human</td>
      <td class="check2" data-bool="true">
        <select>
            <option>true</option>
            <option>false</option>
        </select>
      </td>
    </tr>
    <tr>
     <td class="check1">Robot</td>
      <td class="check2" data-bool="false">
        <select>
            <option>false</option>
            <option>false</option>
        </select>
      </td>
    </tr>
    <tr>
     <td class="check1">Human</td>
      <td class="check2" data-bool="true">
        <select>
            <option>true</option>
            <option>true</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

JS修改点

重写筛选逻辑，每次筛选都遍历所有行，同时校验名称和布尔值两个筛选条件，符合条件的行才显示：

// 统一筛选函数，每次触发都重新校验所有行
function filter() {
  // 先拿到所有勾选的筛选值
  const checkedNames = Array.from(document.querySelectorAll('.option1:checked')).map(i => i.value.toLowerCase())
  const checkedBools = Array.from(document.querySelectorAll('.option2:checked')).map(i => i.value.toLowerCase())
  // 遍历所有表格行
  const rows = document.querySelectorAll('#my-table tbody tr')
  rows.forEach(row => {
    const name = row.querySelector('.check1').innerHTML.toLowerCase()
    const boolVal = row.querySelector('.check2').dataset.bool.toLowerCase()
    // 同时满足两个筛选条件才显示
    const shouldShow = checkedNames.includes(name) && checkedBools.includes(boolVal)
    row.style.display = shouldShow ? '' : 'none'
  })
}

// 绑定事件
document.querySelectorAll('.option1, .option2')
  .forEach(input => input.addEventListener('input', filter));

效果说明 #

修改后取消对应复选框的勾选时，会直接隐藏所有不符合条件的整行数据，不会再只影响下拉框的显示状态，同时支持名称和布尔值两个筛选条件的组合使用。

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