香草 js 在复选框上隐藏行 table

Question

我有以下代码。隐藏 table 行

的复选框

问题: 过滤器布尔值不能隐藏 table 但隐藏 select 选项？我想隐藏行

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

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>

抱歉我的英语不好，无法解释所有我需要的，希望你能理解我的需要

谢谢！

Answer 1

如果我没理解错的话，您想隐藏行而不是 select 个框？

您始终可以只针对您正在进行样式更新的收盘价 'tr'。

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

Fiddle 这里：http://jsfiddle.net/dxmga68s/2/

香草 js 在复选框上隐藏行 table

vanilla js hide row table on checkbox

javascript

checkbox

filter