基于复选框值切换HTML表行的可见性

Question

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

我的问题是，我有一个HTML表，其中每行都有一个复选框，如果用户发现该行很重要，可以标记该复选框。我想要一个"；主"；复选框，用于切换表的行为-如果选中了master，则只显示表上选中的行；如果未选中master，则显示表的所有行。我需要使用纯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元素的选中值，并使用类将其显示设置为none。

代码库中的解释。

添加了一个选项，用于从选中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，并且table被赋予.freeze类，因此在选中#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: 'a02690';
}
.chx:checked+span::before {
content: 'a02691'
}
.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>