根據復選框值切換 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>