即可。点击 “Multicolor”看看效果吧。
最后，我们聊一下重置按钮。
<input type="reset" value="Collapse All">
Salin selepas log masuk
表单的重置按钮很少有人用，不过这里巧用了一下。点击重置按钮，所有复选框恢复成初始的未选中状态，关闭了所有文件夹。有意思吧。
Split List（分隔列表）
这个例子依据已做或未做，把列表选项分成两部分。
See the Pen Checkbox Trickery: To-Do Listby Will Boyd ( @lonekorean) on CodePen.
HTML 像这样：
<div class="items"> <input id="item1" type="checkbox" checked> <label for="item1">Create a to-do list</label> <!-- more items --> <h2 class="done" aria-hidden="true">Done</h2> <h2 class="undone" aria-hidden="true">Not Done</h2></div>
Salin selepas log masuk
分隔列表是由 CSS flexbox 实现的，这是关键的 CSS。
.items { display: flex; flex-direction: column;}.done { order: 1;}input:checked + label { order: 2;}.undone { order: 3;}label { order: 4;}Salin selepas log masuk
CSS flexbox 可以使用 order属性重排元素。当复选框选中的时候，
不幸的是，键盘导航和 许多屏幕阅读器会遵循元素在 DOM 中的顺序，即使它们被 CSS flexbox 做了视觉上的重排。这就导致 “Done”和“Not Done”的标题对于屏幕阅读器无用，这便是我给它们加了 aria-hidden="true"的原因 —— 被忽略总比引起混淆强。此外，通过键盘和屏幕阅读器完全可以控制分隔列表，正确显示列表项的状态（选中 / 未选）。
如果你对“Done”和“Not Done”其后的计数实现感到好奇，它们用到了 CSS counters。想深入学习的话，可以看 这篇文章。
分组筛选
压轴的例子展示了如何根据筛选条件，高亮显示交叉区域的数据。
See the Pen Checkbox Trickery: Group Filterby Will Boyd ( @lonekorean) on CodePen.
这是简短的 HTML 。注意一下 data-teams属性是由空格分隔的列表，它们每一项恰恰与单选按钮的 id属性一致。我就是这么把角色跟队伍匹配起来的。
<input id="original" type="radio" name="team" checked><label for="original">Original X-Men</label><!-- 省略更多团队 --><br><ul class="characters"> <li id="angel" data-teams="original force factor hellfire"> <h2>Angel</h2> <img src="ct-angel.png" alt=""> </li> <!-- 省略更多角色 --></ul>
Salin selepas log masuk
关于可访问性，我使用了空的 alt属性，因为角色的名字已显示在
标签中了 —— 每个名字读两次也没有必要。此外，我没有真正的隐藏 ![复选框的 CSS 魔法_html/css_WEB-ITnose]()
元素（只是收缩和渐隐），屏幕阅读器可以轻易的跳过未高亮的角色。我仅仅需要隐藏 。
当选择团队的时候，高亮对应的角色，CSS 是这么实现的。
#original:checked ~ .characters [data-teams~="original"] h2,#force:checked ~ .characters [data-teams~="force"] h2,#factor:checked ~ .characters [data-teams~="factor"] h2,#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 { /* styles to show character name */}#original:checked ~ .characters [data-teams~="original"] img,#force:checked ~ .characters [data-teams~="force"] img,#factor:checked ~ .characters [data-teams~="factor"] img,#hellfire:checked ~ .characters [data-teams~="hellfire"] img { /* styles to show character avatar */}Salin selepas log masuk
我清楚这些选择器看起来有点吓人，不过也不赖。我们来仔细分析下例子的第一行（译者注：以 CSS 中最长的选择器开始算）。当 id为 ‘original’ 的元素被选中时，找到角色元素里面 data-teams属性包含 ‘original’ 的元素，然后找到它里面的
。2-4行的 ‘force’, ‘factor’, 和 ‘hellfire’ 重复上一步。8-11行继续重复上一步，只不过把 换成了 ![复选框的 CSS 魔法_html/css_WEB-ITnose]()
。 综述
我希望你跟我一样从这些例子中找到了一些乐趣。通过复选框去实现一些好玩的东西，对我而言非常有趣。我并没有排斥在适当的时候使用 JavaScript ，但是没用它也可以实现这么多东西，也是蛮开心的。谢谢阅读！
