html树形表单勾选需语义化ul/li结构、可访问复选框及js状态联动：用data-id标识节点，aria增强无障碍，js维护父子状态映射并正确处理indeterminate，展开折叠与勾选状态分离但持久化。
HTML 分类管理表单中实现树形层级结构的勾选，核心在于三者协同：语义化嵌套结构（ul/li）、可访问的复选框逻辑（input type="checkbox"），以及能正确传播父子状态的 JavaScript 控制。纯 select 或仅靠 CSS 缩进无法满足真实业务需求——它既不支持层级勾选联动，也不具备可访问性与交互稳定性。
用 ul + li 构建语义化树形骨架
避免使用 optgroup 嵌套或空格缩进 option，它们在 DOM 中是扁平的，无法表达父子关系。正确结构应为：
- 每个节点用
<li>表示，带唯一标识（如data-id） - 父节点内嵌子
<ul></ul>，形成自然层级 - 每个节点包含一个
<input type="checkbox">和对应标签（<label></label>或<span></span>） - 添加 ARIA 属性增强可访问性：
role="treeitem"、aria-checked、aria-expanded（对可折叠节点）
复选框状态必须双向联动
用户勾选子项时，父项应自动变为“全选”或“半选”；取消全部子项后，父项应取消。这不能靠 CSS 实现，必须由 JS 管理状态映射。关键点：
- 维护一个映射表（如
Map），以nodeId为键，存储节点对象（含checked、indeterminate、parentId、childrenIds） - 点击任一 checkbox 后，先更新自身
checked状态，再调用递归函数updateAncestors(nodeId) -
updateAncestors需判断子节点是否全部勾选（allChecked）或部分勾选（someChecked），并据此设置父节点的checked和indeterminate - 切记：该函数必须在 change 事件中调用，且必须在更新当前节点状态之后执行，否则计算结果错误
正确处理 indeterminate 半选状态
浏览器原生支持 indeterminate，但极易被样式覆盖而失效：
- 检查是否写了
input[type="checkbox"] { -webkit-appearance: none; }—— 这会彻底禁用indeterminate视觉表现 - 若使用自定义图标（如伪元素或背景图），必须手动同步 class：
el.classList.toggle('indeterminate', node.indeterminate) - 不要用
checked="false"+ class 模拟半选，这破坏语义和屏幕阅读器识别 - 确保
aria-checked="mixed"与 DOM 状态一致，保障无障碍体验
展开/折叠与勾选解耦，但保持视觉一致
分类管理常需收起未操作分支，但勾选状态必须持久保留：
- 折叠逻辑独立于勾选逻辑：通过切换
is-collapsed类控制ul.subtree的max-height和overflow - 勾选状态存在 JS 数据层，不受 display 或 visibility 影响；即使节点被折叠，其
checked值仍参与祖先计算 - 建议用
localStorage或组件状态缓存展开/勾选状态，页面刷新后可还原 - 键盘导航需支持
Space切换勾选、Enter展开折叠，配合tabindex和role="tree"完整 ARIA 支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
