隐藏基于纯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屋！