:indeterminate是只读css伪类，仅对原生checkbox生效，须通过javascript设置indeterminate属性为true/false触发，不能用html属性；常用于父子多选的中间态，需配合aria-checked="mixed"保障可访问性。
复选框的 :indeterminate 状态不是靠 HTML 属性触发的
直接在 HTML 里写 indeterminate="true" 或 checked="indeterminate" 是无效的——:indeterminate 是只读状态，浏览器不会响应它的属性设置。它只能通过 JavaScript 的 indeterminate 属性（注意：是 JS 属性，非 HTML 属性）手动设为 true 或 false。
常见错误现象：样式写了 input[type="checkbox"]:indeterminate { opacity: 0.7; }，但复选框始终不生效，就是因为没用 JS 触发状态。
- 必须用 JS 赋值：
checkbox.indeterminate = true（赋值后 DOM 不会反映该状态，但伪类会立即匹配） - 赋值后，
checked值保持不变（可以是true、false或未设置），:indeterminate和:checked可同时存在 - 用户点击不会自动退出 indeterminate 状态；必须显式设为
false才能恢复交互
:indeterminate 样式只对原生复选框起作用
如果你用了自定义 checkbox（比如用 div + span 模拟），:indeterminate 完全不会命中。它只适用于原生 <input type="checkbox"> 元素。
使用场景集中在「父子级多选」：父 checkbox 表示“部分子项已选”，此时视觉上需要中间态（如短横线或方块），而子项变更后需动态更新父项状态。
- 不要试图给
label或包装容器加:indeterminate—— 无效 - 若需兼容旧版 Safari（:indeterminate 在它们中不支持（可降级为 class 切换）
- Chrome/Firefox/Edge 从很早版本就支持，但 Safari 直到 2022 年才修复部分渲染 bug（比如 indeterminate + checked 同时存在时图标错位）
如何安全地联动父子 checkbox 状态
关键不是“怎么设 indeterminate”，而是“什么时候设、设完怎么收尾”。漏掉清理步骤会导致 checkbox 锁死（无法点击）。
// 示例：父 checkbox ID 为 'parent'
const parent = document.getElementById('parent');
const children = document.querySelectorAll('input[name="child"]:checkbox');
function updateParentState() {
const checkedCount = [...children].filter(c => c.checked).length;
const totalCount = children.length;
if (checkedCount === 0) {
parent.checked = false;
parent.indeterminate = false; // 必须显式关掉
} else if (checkedCount === totalCount) {
parent.checked = true;
parent.indeterminate = false;
} else {
parent.checked = true; // 多数 UI 框架设为 true，图标才显示中间态
parent.indeterminate = true;
}
}
children.forEach(c => c.addEventListener('change', updateParentState));
- 父项
indeterminate = true时，checked建议设为true（否则某些系统下图标不显示中间态） - 用户点击父项时，需重置所有子项并清除
indeterminate，否则下次进函数可能跳过false赋值 - 别在事件中直接操作
parent.checked后立刻读取parent.indeterminate—— 它不会因checked变化而自动变
容易被忽略的细节：focus 与可访问性
设为 indeterminate 后，复选框仍可获得焦点，但屏幕阅读器的行为不统一。部分读作“partially checked”，部分静默，甚至跳过。
- 务必搭配
aria-checked="mixed"（注意是字符串"mixed"，不是布尔值），这是 ARIA 规范要求 -
indeterminate状态下，click事件照常触发，但change事件不会（因为checked没变），别依赖change去监听父项点击 - 键盘空格键在
indeterminate状态下默认切换checked，但不会自动清除indeterminate—— 这个逻辑必须你自己补全
:indeterminate 是个窄口径但高敏感的开关。它不参与表单提交，不改变 value，也不触发 change，唯一作用就是让样式有条件地接管视觉反馈。真正难的从来不是写那行 CSS，而是把 JS 状态机做稳。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
