复选框触发 :indeterminate 状态必须通过 JavaScript 设置 checkbox.indeterminate = true，该属性为可写 DOM 属性；HTML 属性或框架绑定无效，且需注意浏览器兼容性与状态逻辑维护。
复选框怎么触发 :indeterminate 状态
浏览器不会自动把复选框设为 :indeterminate，必须用 JavaScript 手动设置 indeterminate 属性——它是个只读 DOM 属性，但可写（别被 MDN 的“只读”描述误导）。直接改 HTML checked 或 value 都没用。
- 正确做法：
checkbox.indeterminate = true（注意不是setAttribute） - 一旦设为
true，checked值不变，UI 显示中间横杠，且点击后行为和普通复选框一致（先变未选，再变已选） - 常见误操作：用
checkbox.setAttribute('indeterminate', '')—— 这完全无效，DOM 属性和 HTML 属性不是一回事 - React/Vue 等框架里，需在
useEffect或mounted后手动操作 DOM 元素，不能靠绑定v-model或value触发
:indeterminate 样式为什么没生效
CSS 伪类本身没问题，但实际不生效往往是因为选择器权重不够，或浏览器兼容性限制。Chrome/Firefox/Edge 支持良好，Safari 15.4+ 才支持（旧版 Safari 完全忽略该伪类）。
- 必须用
input[type="checkbox"]:indeterminate这类明确类型的选择器；仅写:indeterminate或input:indeterminate在部分浏览器中不匹配 - 不要试图给
:indeterminate单独加checked：它和:checked是互斥状态，同时写:indeterminate:checked永远不匹配 - 自定义 checkbox 样式时，很多 reset CSS（如 normalize.css）会清空原生控件外观，导致
:indeterminate的视觉表现丢失——得靠::before/::after或背景图模拟中间态
半选状态的逻辑该怎么维护
前端没有内置“父子级联动半选”的逻辑，indeterminate 只是视觉标记，状态管理全靠你自己算。
- 典型场景：树形结构中，父节点勾选 = 所有子节点已选；部分子节点选中 → 父节点设为
indeterminate - 关键判断逻辑：
parent.indeterminate = someChildrenChecked && !allChildrenChecked，不是 “非全选即半选” - 注意异步更新风险：子节点变化后立即设父节点
indeterminate，但若 DOM 尚未渲染完成，样式可能延迟一帧才出现 - 无障碍访问（a11y）上，
indeterminate状态不会被屏幕阅读器自动播报，需额外加aria-checked="mixed"
IE 和老版本 Edge 怎么降级处理
IE 完全不支持 :indeterminate 伪类，也无 indeterminate DOM 属性。强行用会静默失败，界面卡在“全未选”或“全已选”，丢失语义。
立即学习“前端免费学习笔记（深入）”；
- 检测方式：
'indeterminate' in document.createElement('input')，返回false就是不支持 - 降级方案：用一个带文字的 placeholder 元素（如
<span class="checkbox-mixed">●</span>）替代原生 checkbox 的 UI，并禁用原生控件的 pointer-events - 别依赖 polyfill：目前没有可靠、轻量的
:indeterminate补丁，JS 模拟整个 checkbox 行为成本远高于视觉降级
真正麻烦的不是怎么画那根横杠，而是谁来决定它该出现、什么时候消失、以及用户点了之后该翻转到哪个状态——这些逻辑一旦散落在多个组件或副作用里，比样式本身难 debug 得多。
