17370845950

:checked伪类可纯CSS判断复选框选中状态并样式控制，支持accent-color、兄弟选择器联动及label交互，现代浏览器兼容良好，JS动态设置也会实时更新样式。

直接用 :checked 伪类就能判断复选框是否被选中，并据此设置样式，无需 JavaScript。

基础用法：给已选中的复选框加样式

:checked 只作用于 （以及单选框、）处于选中状态时。它本身选择的是输入元素，所以样式写在它上面即可：

input[type="checkbox"]:checked {
  accent-color: #4285f4;
}

现代浏览器支持 accent-color 快速修改复选框高亮色；老版本可配合自定义外观（如隐藏原生框 + 用 ::after 绘制图标）。

控制关联元素：用兄弟选择器影响其他内容

常见需求是“选中后显示说明文字”或“高亮对应标签”。利用 ~（通用兄弟）或 +（相邻兄弟）即可：

• 选中后显示隐藏的提示文字（同级后续元素）：
  input[type="checkbox"]:checked ~ .tip { display: block; }
• 让紧挨着的 label 变色：
  input[type="checkbox"]:checked + label { color: #1a73e8; font-weight: bold; }

注意：HTML 中 input 必须在目标元素之前，且在同一父容器内，选择器才生效。

结合 label 实现无 JS 的交互效果

把 label 包裹复选框，或用 for 属性绑定，点击 label 就能触发选中。再配合 :checked，可实现开关、折叠面板等效果：

点击展开
这里是隐藏内容

#toggle:checked ~ .panel { max-height: 200px; opacity: 1; }
.panel { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; }

这样就实现了纯 CSS 的显隐切换，适合轻量交互场景。

注意事项与兼容性

:checked 在所有现代浏览器中均支持（包括 IE9+），但有几点要留心：

• 只对用户操作或 checked 属性初始为 true 的元素生效，JS 动态设置 checked = true 后样式会立即更新；
• 不能用于判断“未选中”，要用 :not(:checked)；
• 若需兼容极旧环境（如 IE8），需回退到 JS 监听 change 事件 + 切换 class 的方式。

不复杂但容易忽略。