根据选中或取消选中表单框来隐藏/显示内容:这只能用css完成吗

Hide/show stuff according to checking or unchecking a form box: Can this be done with css only?

本文关键字：css 显示 表单 取消 隐藏      更新时间：2023-09-26

我可以使用ony-css显示或隐藏内容吗？其中隐藏或显示的内容取决于是否选中表单框？

或者我需要javascript吗？

感谢您的真知灼见！！

是，通过使用"相邻同级"选择器（+）和checked伪类。

HTML

<label>Box 1: <input type="checkbox"><span>Box 1 is checked.</span></label>
<label>Box 2: <input type="checkbox"><span>Box 2 is checked.</span></label>
<label>Box 3: <input type="checkbox"><span>Box 3 is checked.</span></label>

CSS

​label {display:block;}
input[type="checkbox"] + * {display:none; margin-left:1em;}
input[type="checkbox"]:checked + * {display:inline;}

​此处演示：http://jsfiddle.net/LSF3C/

在某些情况下可以这样做，大致如下：

CSS：

input[type="checkbox"]:checked+div{ display:none; }​

HTML:

<input type="checkbox">hide it</input><div>show me</div>

请参阅js-fiddle示例

AFAIK您可以通过JS使用CSS属性来显示/隐藏内容
类似于使用Js更改"display"属性。

相关文章：