html原生不支持级联选择及级联多选，必须用javascript控制显隐、联动和筛选；name/value仅用于提交，无法实现层级依赖；核心是queryselectorall配合条件过滤与状态管理。

直接说结论：HTML 原生不支持「级联选择」，更不支持「级联 + 多选」的组合行为；所谓级联多选，必须靠 JavaScript 控制显隐、联动状态、限制可选范围——不是改几个属性就能实现的。

为什么 name 和 value 不能解决级联问题

很多人以为只要把 checkbox 的 name 写对（比如 name="city"）、value 写细（比如 value="shanghai"），再配合后端逻辑就能“级联”。但这是误解：
– 浏览器只管提交选中的值，不管它们之间有没有层级关系
– name 相同的 checkbox 之间没有父子、依赖或显隐逻辑
– 级联的本质是「A 选中 → B 区域显示/启用/过滤」，这必须由 JS 主动判断并操作 DOM

querySelectorAll + 条件过滤是级联多选的核心操作

级联多选的 JS 实现，核心就是监听上级变化，然后动态筛选、显示、启用下级 checkbox。常见模式如下：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 用 document.querySelectorAll('input[data-parent="province"]') 找出所有属于某省的市级 checkbox
• 上级切换时，先 forEach 清空下级的 checked 状态，并设 disabled = true
• 再根据当前选中的上级 value（如 province.value === "guangdong"），把对应市级 checkbox 的 disabled = false 并恢复之前保存的选中状态（如有）
• 避免直接用 getElementsByName：它返回 HTMLCollection，不支持 forEach，容易漏掉节点

容易被忽略的三个关键细节

级联多选真正上线后最容易翻车的地方，往往不在主逻辑，而在这些边角：

• checkbox 的 disabled 状态不会影响 :checked 伪类匹配，但会影响表单提交——所以收集值时得加 :not(:disabled) 过滤：document.querySelectorAll('input[name="city"]:checked:not(:disabled)')
• 用 change 事件监听 checkbox，但全选按钮（如 id="select-all-city"）触发后，不会自动触发子项的 change，需手动 .dispatchEvent(new Event('change'))
• 移动端 Safari 对 label 包裹 checkbox 的点击响应有时延迟或失效，建议给 checkbox 加 style="position: absolute; opacity: 0;"，再用自定义 UI 层盖住，靠 JS 控制 checked

级联多选不是配置题，是状态管理题。最复杂的部分往往不是“怎么让深圳出现”，而是“用户从广东切到江苏后，之前在深圳勾选的‘南山’‘福田’要不要保留、下次切回来是否自动恢复”——这个策略必须在 JS 里明确定义并持久化，HTML 本身不记状态。

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