使用纯CSS实现复选框控制元素显示与隐藏，核心是利用CSS的相邻兄弟选择器和通用兄弟选择器，结合复选框的选中状态伪类来匹配需要控制显示隐藏的元素，不需要编写任何JavaScript代码就能完成交互逻辑。
实现原理
复选框是表单元素，本身有checked状态，CSS提供了:checked伪类来匹配处于选中状态的复选框。同时我们可以通过兄弟选择器，选中复选框后面的目标元素，根据复选框的选中状态切换目标元素的display属性，从而实现显示和隐藏的切换。
核心用到的CSS知识
- :checked伪类：用于匹配被选中的单选框、复选框或者
select元素中的option。 - 相邻兄弟选择器（+）：选择紧接在另一个元素后的元素，且二者有相同的父元素。
- 通用兄弟选择器（~）：选择某元素后面的所有同层级兄弟元素。
- display属性：通过切换
display: none和display: block（或其他可见值）控制元素是否渲染。
基础实现示例
下面是一个最简单的示例，点击复选框可以切换下方段落的显示和隐藏：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS复选框控制显示隐藏</title>
<style>
/* 默认隐藏目标元素 */
.target {
display: none;
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
}
/* 复选框选中时，显示后面的目标元素 */
#toggle:checked ~ .target {
display: block;
}
</style>
</head>
<body>
<label for="toggle">点击切换内容显示</label>
<input type="checkbox" id="toggle">
<div class="target">
这是被控制显示隐藏的内容，当复选框被选中时我会显示，取消选中时我会隐藏。
</div>
</body>
</html>
代码解析
上面的代码中，首先给目标元素.target设置display: none，默认不显示。然后编写选择器#toggle:checked ~ .target，含义是：当id为toggle的复选框处于选中状态时，选中它后面的所有class为target的兄弟元素，将其display属性改为block，实现显示效果。
这里需要注意，目标元素必须是复选框的同层级兄弟元素，并且位于复选框的后面，否则兄弟选择器无法匹配到目标元素。
进阶用法：自定义复选框样式
默认的复选框样式比较单一，我们可以通过隐藏原生复选框，用其他元素模拟复选框样式，同时不影响纯CSS控制逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义样式复选框控制显示隐藏</title>
<style>
/* 隐藏原生复选框 */
.custom-checkbox input {
display: none;
}
/* 模拟复选框外观 */
.checkbox-display {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 4px;
vertical-align: middle;
cursor: pointer;
position: relative;
}
/* 选中时的模拟样式 */
.custom-checkbox input:checked + .checkbox-display::after {
content: "✓";
position: absolute;
top: -2px;
left: 3px;
color: #2ecc71;
font-size: 16px;
font-weight: bold;
}
/* 控制目标元素显示隐藏 */
.content {
display: none;
margin-top: 15px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.custom-checkbox input:checked ~ .content {
display: block;
}
</style>
</head>
<body>
<div class="custom-checkbox">
<label>
<input type="checkbox">
<span class="checkbox-display"></span>
点击切换内容
</label>
<div class="content">
这是自定义样式后的控制内容，复选框样式已经被替换，但是控制逻辑依然生效。
</div>
</div>
</body>
</html>
注意事项
- 目标元素必须和复选框是同父元素下的后续兄弟元素，否则兄弟选择器无法生效。
- 如果页面中有多个需要独立控制的复选框，每个复选框的id需要唯一，对应的目标元素通过id匹配即可。
- 这种实现方式只适合简单的显示隐藏切换场景，如果需要更复杂的交互逻辑，还是建议使用JavaScript实现。
- 如果目标元素需要初始状态为显示，只需要把默认样式改为
display: block，然后在:checked状态下设置为display: none即可。
适用场景
纯CSS实现复选框控制显示隐藏的方式，适合以下场景：简单的折叠面板、条款同意勾选后显示提交按钮、切换显示不同的内容区块等不需要复杂逻辑的交互。这种方式可以减少JavaScript代码的编写，降低页面脚本体积，同时也能避免脚本加载失败导致的交互失效问题。