vanilla js在复选框上隐藏行表答案

【问题标题】：vanilla js hide row table on checkboxvanilla js在复选框上隐藏行表
【发布时间】：2021-07-23 09:13:41
【问题描述】：

我有以下代码。隐藏表格行的复选框

问题：过滤布尔值不能隐藏表格但隐藏选择选项？我想隐藏行

任何人都可以用我的代码提供建议吗？

function filter(event, filterCol) {
  let element = event.target;
  let condt1 = document.getElementsByClassName(filterCol);
  for (let i = 0; i < condt1.length; i++) {
    if (condt1[i].innerHTML.toLowerCase() == element.value.toLowerCase()) {
      if (element.checked == true) {
        condt1[i].parentElement.style = ""
      } else {
        condt1[i].parentElement.style = "display:none"
      }
    }
  }
}

document.querySelectorAll('.option1')
  .forEach(input => input.addEventListener('input', ()=>filter(event,"check1")));
  
  
document.querySelectorAll('.option2')
  .forEach(input => input.addEventListener('input', ()=>filter(event,"check2")));

<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>
        <select>
            <option class="check2">true</option>
            <option >true</option>
        </select>
      </td>
    </tr>
    <tr>
        <td class="check1">Human</td>
      <td>
        <select>
            <option class="check2">true</option>
            <option >false</option>
        </select>
      </td>
    </tr>
    <tr>
     <td class="check1">Robot</td>
      <td>
        <select>
            <option class="check2">false</option>
            <option >false</option>
        </select>
      </td>
    </tr>
    <tr>
     <td class="check1">Human</td>
      <td>
        <select>
            <option class="check2">true</option>
            <option >true</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

对不起，我的英语不好，无法解释我需要什么，希望你明白我需要什么

谢谢！

【问题讨论】：

为表和要隐藏的标签提供相同的类名或 id。我认为这就是问题所在。

标签： javascript checkbox filter

【解决方案1】：

如果我理解正确，您想隐藏行而不是选择框？

你总是可以只针对你正在做样式更新的关闭'tr'。

if (element.checked == true) {
   condt1[i].parentElement.closest('tr').style = ""
} else {
   condt1[i].parentElement.closest('tr').style = "display:none"
}

在这里提琴：http://jsfiddle.net/dxmga68s/2/

【讨论】：

啊，是的，这正是我所需要的，谢谢！