本教程探讨在不使用javascript的情况下，如何仅凭html、css（包括scss）和bootstrap 4实现通过一个按钮控制多个复选框的“全选”视觉效果。核心策略是利用css的`:target`伪类，通过切换不同html部分的显示与隐藏，来模拟复选框状态的批量切换，为特定场景提供纯前端的视觉解决方案。
在现代网页开发中，动态交互通常依赖于JavaScript。然而，在某些严格限制JavaScript使用的场景下，开发者可能需要寻找纯HTML和CSS的替代方案来实现类似的交互效果。本文将介绍一种利用CSS :target 伪类来模拟按钮控制复选框状态的视觉切换方法，尤其适用于实现“一键全选/取消全选”的视觉效果。
理解CSS :target 伪类
CSS :target 伪类用于选择当前URL的片段标识符（hash，即URL中#后面的部分）所指向的元素。当用户点击一个链接，如果该链接的href属性指向页面中某个元素的ID，那么该元素就会成为:target。通过结合CSS的显示/隐藏属性，我们可以利用这一特性在不同内容块之间进行视觉切换，从而模拟状态的改变。
实现原理
核心思想是创建两套（或多套）HTML结构，每套结构代表复选框的不同状态（例如，“全部未选中”和“全部选中”）。然后，通过一个链接（样式化为按钮）改变URL的hash值，触发:target伪类，从而显示对应的HTML结构，隐藏其他结构。
1. HTML结构设计
我们需要创建两个主要的 section 元素，分别承载复选框的两种状态：一个状态是所有复选框都未选中，另一个状态是所有复选框都已选中。每个 section 内部包含相同的复选框布局，但 input 标签的 checked 属性有所不同。同时，为每个 section 配备一个链接（模拟按钮），用于切换到另一个 section。
立即学习“前端免费学习笔记（深入）”；
<!-- 全部未选中状态的容器 -->
<section id="visual_off">
<div class="welcome-left-btn">
<label class="switch">
<input type="checkbox" name="chk">
<span class="slider round"></span>
</label>
</div>
<div class="welcome-left-btn">
<label class="switch">
<input type="checkbox" name="chk">
<span class="slider round"></span>
</label>
</div>
<!-- 切换到“全部选中”状态的按钮 -->
<a type="submit" href="#visual_on" class="btn btn-primary">全部开启</a>
</section>
<!-- 全部选中状态的容器 -->
<section id="visual_on">
<div class="welcome-left-btn">
<label class="switch">
<input type="checkbox" name="chk" checked>
<span class="slider round"></span>
</label>
</div>
<div class="welcome-left-btn">
<label class="switch">
<input type="checkbox" name="chk" checked>
<span class="slider round"></span>
</label>
</div>
<!-- 切换到“全部未选中”状态的按钮 -->
<a type="submit" href="#visual_off" class="btn btn-secondary">全部关闭</a>
</section>- #visual_off 包含未选中的复选框和一个指向 #visual_on 的链接。
- #visual_on 包含已选中的复选框和一个指向 #visual_off 的链接。
- a 标签被赋予 btn 和 btn-primary/secondary 类以利用Bootstrap 4的按钮样式。
2. CSS样式定义
除了自定义的复选框开关样式（switch, slider 等），关键在于利用 :target 伪类来控制 section 元素的显示与隐藏。
/* 自定义复选框开关样式（保持不变） */
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 23px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 19px;
width: 19px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #3861fb;
}
input:focus+.slider {
box-shadow: 0 0 1px #3861fb;
}
input:checked+.slider:before {
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
transform: translateX(17px);
}
.slider.round {
border-radius: 25px;
}
.slider.round:before {
border-radius: 50%;
}
/* 核心的 :target 切换逻辑 */
section {
display: none; /* 默认隐藏所有 section */
}
section:target, /* 当某个 section 被 target 时显示 */
section:last-of-type { /* 如果没有 target，则默认显示最后一个 section */
display: block;
}
/* 确保当某个 section 被 target 时，其后的最后一个 section 不会同时显示 */
section:target ~ section:last-of-type {
display: none;
}3. CSS逻辑解析
- section { display: none; }: 默认情况下，所有 section 元素都被隐藏。
- section:target { display: block; }: 当页面的URL片段标识符与某个 section 的ID匹配时（即该 section 被 :target），它将显示出来。
- section:last-of-type { display: block; }: 这条规则处理页面初次加载或URL中没有hash值的情况。它确保文档中最后一个 section （在本例中是 #visual_on）默认是可见的，作为初始状态。
- section:target ~ section:last-of-type { display: none; }: 这条规则是关键，用于解决当一个 section 被 :target 时，如何隐藏掉原本可能由 section:last-of-type 规则显示的另一个 section。
- 如果URL是 #visual_off：#visual_off 被 :target，所以它显示。同时，#visual_on 是 last-of-type 且在 #visual_off 之后，因此 section:target ~ section:last-of-type 规则会隐藏 #visual_on。
- 如果URL是 #visual_on：#visual_on 被 :target，所以它显示。由于 #visual_on 是最后一个 section，其后没有 last-of-type 的 section，所以 section:target ~ section:last-of-type 规则不适用，#visual_off 仍然被 section { display: none; } 规则隐藏。
通过这种方式，每次点击按钮，URL的hash值都会改变，从而触发不同的 section 显示，实现复选框状态的视觉切换。
注意事项与局限性
尽管这种纯CSS方法在特定场景下非常巧妙，但它存在一些固有的局限性：
- 纯粹的视觉效果： 这种方法仅改变了用户界面上复选框的视觉状态。它并非动态地修改现有复选框的 checked 属性。当表单提交时，实际提交的数据将取决于当前哪个 section 是可见的，以及其中复选框的 checked 属性。
- URL hash的改变： 每次点击都会改变浏览器URL的hash值，这可能会影响用户体验，例如在某些单页应用中，hash通常用于路由。
- 可伸缩性差： 对于需要管理多种状态或大量复选框的复杂场景，这种方法的可维护性会迅速下降。每增加一种状态，都需要复制一份HTML结构，导致代码冗余。
- 无真实逻辑交互： 无法实现更复杂的逻辑，例如根据用户对单个复选框的勾选情况来动态更新“全选”按钮的状态。
- 语义化问题： 使用 section 元素来承载相同但不同状态的内容，可能在语义上不够清晰。
- 辅助功能（Accessibility）： 对于屏幕阅读器等辅助设备，这种内容切换方式可能不如JavaScript控制的动态内容更易于理解。
总结
利用CSS :target 伪类实现复选框的“一键全选”视觉切换，是一种在严格限制JavaScript使用时可行的技术方案。它通过切换预定义HTML块的显示来模拟状态变化，提供了一种纯前端的视觉交互。然而，这种方法主要是一种“视觉黑客”技巧，具有明显的局限性，不适用于复杂的动态交互或需要高性能、高可维护性的应用。在大多数现代Web开发场景中，JavaScript仍然是实现此类交互的首选和更健壮的解决方案。
