aria-checked="mixed"是唯一合法的混合状态值，仅用于向辅助技术传递部分选中语义，不改变dom checked属性或表单提交行为，需配合js同步视觉样式与键盘交互。

aria-checked="mixed" 是唯一合法的混合状态值

浏览器和屏幕阅读器只认 aria-checked="mixed" 这个字符串，写成 aria-checked="true"、aria-checked="false" 或留空都不行。它不改变 DOM 的 checked 属性，也不影响表单提交——纯粹是给辅助技术传递“部分选中”语义的信号。

必须配合 JS 手动同步 aria-checked 和视觉样式

原生 <input type="checkbox"> 没有混合状态，所以得用自定义控件（比如 <div role="checkbox">）或隐藏原生框后用伪元素模拟。关键点： <ul> <li>不能只改 <code>aria-checked 属性，还得同步更新 CSS 类（如 .state-mixed）来切换 ✅ ➝ ⚪ 的视觉表现

点击时要手动计算子项选中比例：全选 → aria-checked="true"；全不选 → aria-checked="false"；其余 → aria-checked="mixed"

别忘了键盘支持：空格键触发状态切换逻辑，且焦点在元素上时，屏幕阅读器才能读出当前 aria-checked 值

后端收不到 aria-checked，别指望它传数据

aria-checked 是纯语义层标记，不影响表单序列化。用户看到的“混合状态”只是 UI 提示，实际提交的仍是底层 <input> 的 checked 状态（true/false）或根本没提交（如果用了自定义 div）。常见处理方式：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 保留一个隐藏的 <input type="hidden" name="xxx">，JS 在状态变化时写入 "all"/"none"/"partial" 字符串
• 或者直接用多个真实复选框 + 全选主控，靠后端解析选中项数量判断是否“部分”
• 千万别把 aria-checked 当作服务端校验依据——它可能被绕过、被忽略、或压根没发过去

三态 checkbox 的 tabindex 和 keyboard 行为容易漏

如果用了 role="checkbox" 的自定义元素，必须手动加 tabindex="0" 才能获得焦点，否则键盘用户根本点不到。而且 change 事件不会自动触发，得监听 click 和 keydown（空格/Enter），再调用 event.preventDefault() 防止滚动，最后更新状态和 aria-checked。移动端还要考虑 touchstart 兼容性。