如何仅用CSS和HTML实现多复选框列表过滤？含多选逻辑

核心问题分析 #

你之前的代码存在两个关键错误：

• 相邻兄弟选择器+无法匹配非紧挨着的元素：你的HTML中A复选框后是<br>，而非直接跟B复选框，因此input[name=a]:checked + input[name=b]:checked永远无法命中目标。
• :not([data-type=a, b])是无效语法：CSS的:not()不支持逗号分隔多选择器，需要用多个:not()嵌套来实现多条件排除。

解决方案（现代浏览器） #

利用CSS :has()选择器判断复选框组合状态，结合空格分隔的data-type属性标记多类别项，实现需求中的过滤逻辑。

完整代码

<input type="checkbox" name="a"> A
<input type="checkbox" name="b"> B
<input type="checkbox" name="c"> C
<hr/>
<div class="items">
  <div data-type="a">仅A</div>
  <div data-type="b">仅B</div>
  <div data-type="c">仅C</div>
  <div data-type="a b">A+B</div>
  <div data-type="a c">A+C</div>
  <div data-type="b c">B+C</div>
  <div data-type="a b c">A+B+C</div>
</div>

/* 默认显示所有项 */
.items div {
  display: block;
  margin: 4px 0;
}

/* 单个复选框选中：仅显示对应类别项 */
input[name=a]:checked:not(:has(~ input[name=b]:checked, ~ input[name=c]:checked)) ~ .items div:not([data-type~=a]),
input[name=b]:checked:not(:has(~ input[name=a]:checked, ~ input[name=c]:checked)) ~ .items div:not([data-type~=b]),
input[name=c]:checked:not(:has(~ input[name=a]:checked, ~ input[name=b]:checked)) ~ .items div:not([data-type~=c]) {
  display: none;
}

/* 两个复选框选中：显示两类及交叉项 */
input[name=a]:checked:has(~ input[name=b]:checked):not(:has(~ input[name=c]:checked)) ~ .items div:not([data-type~=a]):not([data-type~=b]),
input[name=a]:checked:has(~ input[name=c]:checked):not(:has(~ input[name=b]:checked)) ~ .items div:not([data-type~=a]):not([data-type~=c]),
input[name=b]:checked:has(~ input[name=c]:checked):not(:has(~ input[name=a]:checked)) ~ .items div:not([data-type~=b]):not([data-type~=c]) {
  display: none;
}

关键细节说明 #

1. data-type格式：用空格分隔多值（如data-type="a b"），配合[data-type~=a]选择器匹配包含该类别的所有项，包括交叉项。
2. :has()的作用：判断是否有其他复选框被选中，区分「单选」和「多选」场景，确保多选规则优先级高于单选。
3. :not()嵌套：div:not([data-type~=a]):not([data-type~=b])表示排除既不属于A也不属于B的项，仅保留A、B、A+B类内容。

兼容性方案（无需:has()） #

如果企业wiki的浏览器不支持:has()，可以通过枚举所有复选框组合的方式实现，代码量更大但兼容性更好：

/* 仅A选中 */
input[name=a]:checked ~ input[name=b]:not(:checked) ~ input[name=c]:not(:checked) ~ .items div:not([data-type~=a]) {
  display: none;
}

/* 仅B选中 */
input[name=a]:not(:checked) ~ input[name=b]:checked ~ input[name=c]:not(:checked) ~ .items div:not([data-type~=b]) {
  display: none;
}

/* 仅C选中 */
input[name=a]:not(:checked) ~ input[name=b]:not(:checked) ~ input[name=c]:checked ~ .items div:not([data-type~=c]) {
  display: none;
}

/* A+B选中 */
input[name=a]:checked ~ input[name=b]:checked ~ input[name=c]:not(:checked) ~ .items div:not([data-type~=a]):not([data-type~=b]) {
  display: none;
}

/* A+C选中 */
input[name=a]:checked ~ input[name=b]:not(:checked) ~ input[name=c]:checked ~ .items div:not([data-type~=a]):not([data-type~=c]) {
  display: none;
}

/* B+C选中 */
input[name=a]:not(:checked) ~ input[name=b]:checked ~ input[name=c]:checked ~ .items div:not([data-type~=b]):not([data-type~=c]) {
  display: none;
}

内容的提问来源于stack exchange，提问作者Andrew Phillips