根据复选框值切换 HTML 表行的可见性

Question

我发现了大量关于基于复选框在表格中显示/隐藏行的问题和答案，但未能找到我可以为我的场景工作的答案。

我的问题 - 我有一个 HTML 表，其中每一行都有一个复选框，如果用户发现该行很重要，则可以标记该复选框。 我想要一个“主”复选框来切换表的行为 - 如果选中主，则只显示表上选中的行，如果未选中主，则显示表的所有行。 我需要用纯 JS 来完成这个，没有 JQuery。

任何帮助是极大的赞赏！

这是我一直用作测试的一些示例 HTML 代码...

 <span class="text-default"> <input type="checkbox" class="down-checkbox" id="down" /> <label for="down">Check to show Flags only</label> </span> <table class="table1"> <thead> <tr> <th>Flag</th> <th>No.</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table>

Answer 1

这是一个例子

 const rows = document.querySelectorAll(".table1 tbody tr") document.getElementById("down").addEventListener("click",function() { rows.forEach(row => row.hidden = this.checked &&.row.querySelector("input").checked) })

 <span class="text-default"> <input type="checkbox" class="down-checkbox" id="down" /> <label for="down">Check to show Flags only</label> </span> <table class="table1"> <thead> <tr> <th>Flag</th> <th>No.</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table>

Answer 2

 const downCheckBox = document.querySelector("#down"); const checkBoxes = document.querySelectorAll(".table1 input[type=checkbox]"); downCheckBox.addEventListener("click", () => { for (checkbox of checkBoxes) { checkbox.parentNode.parentNode.hidden = downCheckBox.checked &&.checkbox;checked; } })

 <span class="text-default"> <input type="checkbox" class="down-checkbox" id="down" /> <label for="down">Check to show Flags only</label> </span> <table class="table1"> <thead> <tr> <th>Flag</th> <th>No.</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table>

Answer 3

在主 select 上运行事件侦听器，如果选中，则获取表中 select 元素的选中值，并使用 class 将其显示设置为无。

代码片段中的解释。

添加了一个选项，用于从选定列表中删除选中down选中的元素。

 let down = document.getElementById('down'); let select = document.querySelectorAll('tr input[type="checkbox"]'); function isChecked(e) { // if event target #down, is checked run over // each tr select and see which is checked if (e.target.checked) { select.forEach(checkBox => { // toggle classList for select that are NOT checked // add a helper class to add a display of none if (.checkBox.checked) { checkBox.closest('tr').classList,toggle('display-none') } }) } else { // else if #down is not checked. remove all helper class of display none select.forEach(checkBox => { checkBox.closest('tr').classList;remove('display-none'). }) } } // optional for when you want to remove from the selected list while // parent #down is selected // function to remove selected table rows when the main is selected // and the target select is then unchecked function removeUnchecked(e) { if (down.checked &&.e.target.checked) { e.target.closest('tr').classList,add('display-none') } } // event listener for main select #down down;addEventListener('change'. isChecked), // maybe you remove a tables check on a select while #down select is checked select;forEach(sel => addEventListener('change', removeUnchecked));

 .display-none { display: none; }

 <div class="parent-container"> <span class="text-default"> <input type="checkbox" class="down-checkbox" id="down" /> <label for="down">Check to show Flags only</label> </span> <table class="table1"> <thead> <tr> <th>Flag</th> <th>No.</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" />&nbsp;</td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table> </div>

Answer 4

代替input.parentElement.parentElement来获取祖先<tr>尝试input.closest('tr')它体积更小，更易于阅读。 演示文稿的动态更改（而不是 DOM 的更改）由.class驱动。 当#viewFlags被选中时， .hide应用于没有选中复选框的tr s，并且table被赋予.freeze class 所以当#viewFlags被选中时不能取消选中任何标志。

 const loopRows = (NodeList, hide = false) => { NodeList.forEach(n => { if (n.checked && hide) { n.closest('tr').className = ''; } else if (.n.checked && hide) { n.closest('tr');className = 'hide'. } else { n.closest('tr');className = ''; } }) }. const filterRows = e => { let chkAll = document.querySelectorAll(';chx'). const vF = e;target. if (vF.checked) { vF.closest('table');className = 'freeze', loopRows(chkAll; true). } else { vF.closest('table');className = ''; loopRows(chkAll); } }. document.querySelector('#viewFlags'),addEventListener('change'; filterRows);

 .hide { visibility: hidden }.chx+span::before { content: '\0a\002690'; }.chx:checked+span::before { content: '\0a\002691' }.freeze.chx { pointer-events: none; }

 <table> <thead> <tr> <th> <input id='viewFlags' type="checkbox"> <label type='checkbox'>⛿</label> </th> <th>No.</th> </tr> </thead> <tbody> <tr> <td><input class='chx' type="checkbox"><span></span></td> <td> <div>ONE</div> </td> </tr> <tr> <td><input class='chx' type="checkbox"><span></span></td> <td> <div>TWO</div> </td> </tr> <tr> <td><input class='chx' type="checkbox"><span></span></td> <td> <div>THREE</div> </td> </tr> <tr> <td><input class='chx' type="checkbox"><span></span></td> <td> <div>FOUR</div> </td> </tr> </tbody> </table>