HTML的aria-checked怎么做三态复选框-html教程-PHP中文网

aria-checked是aria状态属性，用于向屏幕阅读器传达复选框的三态（true/false/mixed），而checked是原生布尔属性，仅控制选中/未选中二态且影响表单提交；indeterminate必须用javascript设置，与checked独立，需同步aria-checked="mixed"保障无障碍。

html的aria-checked怎么做三态复选框

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 中静态写成：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<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 事件，自己判断逻辑并重置

三态的核心不在“怎么画横线”，而在“状态如何与用户操作、子项联动、读屏器同步”——这三件事缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！