隐藏基于纯CSS中复选框的表行 [英] Hide table row based on checkbox in pure CSS
问题描述
对于那些关心的人来说,有些背景故事:前段时间,我偶然发现了这一点: https://medium.com/front-end-hacking/how-it-feels-to-learn-javascript-in-2017-a934b801fbe ,尤其是:
A bit of backstory, for those who care: some time ago I stumbled across this: https://medium.com/front-end-hacking/how-it-feels-to-learn-javascript-in-2017-a934b801fbe, and in particular, this: https://brlewis.github.io/2017/planets.html
今天我想:CSS完全能够根据复选框的状态隐藏事物,这几乎可以达到相同的效果.唯一的麻烦是,我不知道CSS选择器是否足够灵活以选择正确的表行.
And today I thought: CSS is perfectly capable of hiding things based on the state of checkboxes, which would achieve pretty much the same effect. The only trouble is, I have no idea whether CSS selectors are flexible enough to select the right table rows.
所以,我的问题是这样的:给定一些类似于以下内容的HTML:
So, my question is this: given some HTML resembling this:
<label><input type=checkbox id=rock> Terrestrial</label>
<label><input type=checkbox id=gas> Gas Giant</label>
<label><input type=checkbox id=ice> Ice Giant</label>
<table>
<tr class=rock><td>whatever
<tr class=ice><td>whatever
... and so one...
</table>
我们可以做这样的事情吗?
Can we do something like this?
magic ~ > :checked ~ tr {display: none}
推荐答案
最终答案:
这是您要尝试做的事的我的模型.顺便说一下, 好问题!
Here is my mockup of what you are trying to do. By the way Nice Question!!!
input#rock:checked ~ table tr.rock {display: block}
input#gas:checked ~ table tr.gas {display: block}
input#ice:checked ~ table tr.ice {display: block}
input:checked ~ table tr {display:none}
<input type=checkbox id=rock><label> Terrestrial</label>
<input type=checkbox id=gas><label> Gas Giant</label>
<input type=checkbox id=ice><label> Ice Giant</label>
<table>
<tr class=rock><td>whatever for rock</td></tr>
<tr class=ice><td>whatever for ice</td></tr>
<tr class=gas><td>whatever for gas</td></tr>
</table>
旧答案:
如果将标签和复选框分开,则可以实现!
If you seperate the label and the checkbox it can be achieved like so!
input:checked ~ table tr {display: none}
<input type=checkbox id=rock checked><label> Terrestrial</label>
<input type=checkbox id=gas><label> Gas Giant</label>
<input type=checkbox id=ice><label> Ice Giant</label>
<table>
<tr class=rock><td>whatever</td></tr>
<tr class=ice><td>whatever</td></tr>
</table>
这篇关于隐藏基于纯CSS中复选框的表行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!