仅用CSS和HTML实现多复选框列表过滤，含多选项触发逻辑

需求说明 #

• 勾选复选框A/B/C中的单个时，显示对应内容A/B/C
• 仅当A、B、C三个复选框全部勾选时，才显示内容D

修改后的完整代码 #

CSS部分

/* 初始隐藏所有列表项 */
.items>[data-type] {
  display: none;
}

/* 单个复选框勾选时，显示对应内容 */
input[name=a]:checked~.items div[data-type=a],
input[name=b]:checked~.items div[data-type=b],
input[name=c]:checked~.items div[data-type=c] {
  display: block;
}

/* 三个复选框全部勾选时，显示内容D */
input[name=a]:checked~input[name=b]:checked~input[name=c]:checked~.items div[data-type=d] {
  display: block;
}

HTML部分

<input type="checkbox" name="a" style="display: inline-block;"> A<br/>
<input type="checkbox" name="b" style="display: inline-block;"> B<br/>
<input type="checkbox" name="c" style="display: inline-block;"> 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="d">D</div>
</div>

关键逻辑说明 #

1. 初始隐藏：通过.items>[data-type]选择器统一隐藏所有列表项，确保初始状态无内容显示
2. 单个勾选触发：利用CSS的通用兄弟选择器(~)，当指定复选框被勾选时，匹配后续.items中对应data-type的元素并显示
3. 全选触发D：通过链式的input[name=x]:checked~选择器，只有当A、B、C三个复选框全部处于勾选状态时，才会匹配到后续的.items div[data-type=d]并显示——通用兄弟选择器会跳过中间的<br/>和<hr/>元素，不影响选择逻辑

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