aria-checked是ARIA状态属性，用于向屏幕阅读器传达复选框的三态（true/false/mixed），而checked是原生布尔属性，仅控制选中/未选中二态且影响表单提交；indeterminate必须用JavaScript设置，与checked独立，需同步aria-checked="mixed"保障无障碍。
aria-checked 是什么，和 checked 有什么区别
aria-checked 是 ARIA 属性，用于向辅助技术（如屏幕阅读器）传达复选框的当前状态，但它不控制实际 DOM 行为或表单提交逻辑。而原生 checked 属性只支持 true/false 两种值（即“选中”或“未选中”），且是布尔属性——存在即选中，不存在即未选中。
aria-checked 则多一个值："mixed"，用来表示“部分选中”，也就是三态（indeterminate）状态。这个状态在视觉上常表现为中间横线（—），但原生 input[type="checkbox"] 的 indeterminate 属性只能通过 JS 设置，且它不改变 checked 值，只影响渲染和 ARIA 暴露。
所以：
- 用 indeterminate 控制视觉三态（JS 赋值）
- 用 aria-checked="mixed" 向读屏器同步该状态
- 两者要同时设置，否则语义不一致
怎么用 JS 设置 indeterminate 并同步 aria-checked
indeterminate 是原生 checkbox 元素的可写属性，类型为布尔值，但它和 checked 独立：
-
element.indeterminate = true→ 显示“—”，但element.checked仍为false -
element.indeterminate = false→ 恢复为正常勾/空状态，此时checked才起作用 - 设置
indeterminate后，必须手动同步aria-checked，否则读屏器读不到“mixed”
const master = document.getElementById('master-checkbox');
master.indeterminate = true;
master.setAttribute('aria-checked', 'mixed'); // 必须显式设置
注意：不能用 master.setAttribute('indeterminate', 'true') —— 这无效，indeterminate 不是 HTML 属性，是 DOM 属性。
立即学习“前端免费学习笔记（深入）”；
为什么直接写 aria-checked="mixed" 在 HTML 里没用
如果你在 HTML 中静态写成：
<input type="checkbox" aria-checked="mixed">
浏览器会忽略它，因为：
- 原生 checkbox 渲染逻辑不读取
aria-checked来决定视觉状态 -
indeterminate必须由 JS 动态设置，且仅在元素已挂载到 DOM 后才生效 - 静态
aria-checked="mixed"可能被读屏器误读，但视觉仍是未选中（checked未设，indeterminate为 false）
所以三态必须靠 JS 驱动，HTML 里只留基础结构：
<input type="checkbox" id="master-checkbox">
然后在 JS 中根据子项状态计算并设置：
- 全部子项选中 →
indeterminate = false; checked = true; aria-checked = "true" - 全部未选中 →
indeterminate = false; checked = false; aria-checked = "false" - 部分选中 →
indeterminate = true; checked = false; aria-checked = "mixed"
容易被忽略的兼容性细节
IE 和旧版 Edge 对 indeterminate 支持良好，但 Safari 在某些版本中对 aria-checked="mixed" 的读屏播报不一致；更关键的是：
- 如果用了 React/Vue，别直接操作
indeterminate—— 它不是响应式属性，得用ref或dom直接访问元素后设置 - 服务端渲染时，不要在 HTML 中预设
aria-checked，等客户端 JS 初始化后再设置，否则 SSR 和 CSR 状态可能错位 -
indeterminate设为true后，用户点击不会自动切换回false—— 你得监听click事件，自己判断逻辑并重置
三态的核心不在“怎么画横线”，而在“状态如何与用户操作、子项联动、读屏器同步”——这三件事缺一不可。
