Encontré una gran cantidad de preguntas y respuestas con respecto a mostrar/ocultar filas en una tabla en función de las casillas de verificación, pero no pude encontrar una respuesta que pueda trabajar para mi escenario.
Mi problema: tengo una tabla HTML donde cada fila tiene una casilla de verificación que el usuario puede marcar si considera que esa fila es importante. Me gustaría tener una casilla de verificación "maestro" que alterne el comportamiento de la tabla: si el maestro está marcado, solo muestre las filas marcadas en la tabla, si el maestro no está marcado, muestre todas las filas de la tabla. Necesito lograr esto con JS puro, sin JQuery.
¡Cualquier ayuda es muy apreciada!
Aquí hay un ejemplo de código HTML que he estado usando como prueba...
<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" /> </td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table>Aquí hay un ejemplo
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" /> </td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table>En lugar de input.parentElement.parentElement para obtener el ancestro <tr> , intente input.closest('tr') , es menos voluminoso y más fácil de leer. Los cambios dinámicos en la presentación (no los cambios en DOM) están controlados por .class . Cuando #viewFlags está marcado, .hide se aplica a los tr s que no tienen ninguna casilla de verificación marcada y la table recibe la clase .freeze , por lo que no se pueden desmarcar los indicadores cuando #viewFlags está marcado.
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> 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" /> </td> <td><span class="whatever">ONE</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">TWO</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">THREE</span></td> </tr> <tr> <td><input type="checkbox" /> </td> <td><span class="whatever">FOUR</span></td> </tr> </tbody> </table>