复选框的 :indeterminate 状态只能通过 JavaScript 设置 indeterminate 属性实现，无法通过 HTML 属性或 CSS 触发；其样式需针对不同浏览器伪元素定制，父子联动需动态计算并避免事件循环；无障碍需用 aria-checked="mixed" 补充语义。
复选框怎么触发 :indeterminate 状态
浏览器不会自动把 <input type="checkbox"> 设为 :indeterminate，必须靠 JS 手动设置 indeterminate 属性。HTML 属性里写 indeterminate="true" 没用，它不是布尔属性，也不参与序列化。
常见错误是直接改 HTML 或试图用 CSS 强制显示半选样式——:indeterminate 是只读状态，只能由 JS 控制：
-
checkbox.indeterminate = true会立即生效，且不触发change事件 -
checkbox.checked此时仍为false（或true），和indeterminate互不影响 - 设为
true后，用户点击勾选/取消，indeterminate自动变回false，checked按正常逻辑翻转
:indeterminate 的样式为什么没生效
最常踩的坑：CSS 选择器权重不够，或者写了但没覆盖浏览器默认样式。比如 Chrome 默认用一个灰色方块表示半选，但如果你只写 input:indeterminate { background: blue; }，根本改不到那个小方块——它不在 <input> 元素本身上，而在伪元素里。
不同浏览器需要不同伪元素规则：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge：
input:indeterminate::-webkit-checkbox { appearance: none; }配合::-webkit-checkbox::before自定义 - Firefox：
input:indeterminate::-moz-appearance不支持自定义，得用background+border覆盖::before - Safari 15.4+ 支持
::-webkit-checkbox，但旧版 Safari 只能靠遮罩层模拟
别漏掉重置 appearance: none，否则自定义样式会被原生控件挡住。
父子复选框联动时 indeterminate 怎么同步
树形结构或分组场景下，“全选”父 checkbox 的 indeterminate 状态，要靠子项状态实时推导：当部分子项被勾选（且非全部），父项才设为 indeterminate。
关键点不是“怎么设”，而是“什么时候设”和“设完怎么清”：
- 监听所有子项的
change事件，汇总checked状态，再算出父项应处的状态 - 父项被点击时，除了改自身
checked，还得批量更新子项 —— 但此时要避免触发子项的change回调（否则循环计算） - 推荐用
dispatchEvent模拟点击，或加个标志位临时屏蔽子项监听 - 别在每次子项变化时都重绘整个 DOM，只改
indeterminate和checked属性即可
移动端或无障碍访问时要注意什么
:indeterminate 在屏幕阅读器中默认不播报“半选”，iOS VoiceOver 和 Android TalkBack 都只读 checked 状态。这意味着视觉上的半选对残障用户不可见。
必须手动补足语义：
- 给父 checkbox 加
aria-checked="mixed"（注意不是"indeterminate"） - 配合
aria-label或aria-describedby说明当前是“部分选中” - Android 上某些 WebView 忽略
indeterminate属性，需 fallback 到 class 切换 + 自定义图标 - 不要依赖纯颜色区分状态，灰度、图标、文字提示至少保留两种
半选不是视觉糖，它是父子状态不一致时的明确信号。一旦忽略语义或跨端兼容处理，这个信号就失效了。
