基于复选框值的HTML表行的可见性切换
基于复选框值的HTML表行的可见性切换
提问于 2022-01-21 20:23:50
我已经找到了大量关于基于复选框在表中显示/隐藏行的问题和答案，但没有找到一个可以为我的方案工作的答案。
我的问题是，我有一个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" /> </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>
回答 4
Stack Overflow用户
回答已采纳
发布于 2022-01-21 20:30:29
下面是一个例子
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>
Stack Overflow用户
发布于 2022-01-21 20:50:46
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>
Stack Overflow用户
发布于 2022-01-21 21:01:28
在主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" /> </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>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70807275
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号