原生HTML无法实现多规格联动选择，必须配合JavaScript；关键在于HTML结构设计：用分组、或作为选项，添加data-spec和data-value属性，避免中文判断与硬编码映射。
怎么用原生 HTML 实现多规格联动选择
纯 HTML 无法完成“选尺码后颜色可选项动态变化”这类逻辑，select 和 input[type="radio"] 本身不带状态感知能力。必须配合 JavaScript 才能响应用户操作、过滤可用组合、更新 DOM。但 HTML 结构设计直接影响后续 JS 的编写难度和可维护性。
关键原则是：把每个规格（如“颜色”“尺码”）作为独立的 <fieldset></fieldset>，每个规格值用 <input type="radio"> 或 <button type="button"></button>（更易样式控制），并为每个规格项打上结构化标记，比如 data-spec="color"、data-value="red"。
常见错误是直接用一堆无关联的 <select></select>，导致 JS 需要硬编码映射关系；或者把所有规格值塞进一个 <datalist></datalist>，完全无法表达组合约束。
- 每个规格容器加
name属性（如name="color"），方便 JS 用document.querySelectorAll('[name="color"]')批量获取 - 禁用无效选项时，不要用
disabled—— 它会跳过表单提交，且视觉反馈难统一；改用aria-disabled="true"+ CSS 控制样式 - 所有规格项必须有唯一
value或data-value，避免用中文文本做判断（如"红色"→ 后续匹配易出错）
为什么不能只靠 CSS :checked + ~ 伪类实现联动
CSS 的 :checked 只能影响**同级或后续兄弟元素**，而商品规格之间是跨层级、双向依赖的（选颜色影响尺码，选尺码又可能影响库存提示）。CSS 无法表达“当 color=red 且 size=xl 时，启用‘加入购物车’按钮”这类复合条件。
立即学习“前端免费学习笔记（深入）”；
实际中有人尝试用大量 input[id] + label[for] 搭配 ~ 和 + 组合选择器模拟状态，结果是选择器爆炸式增长、不可调试、IE/旧 Safari 兼容差，且一旦增加新规格（比如“材质”），整个 CSS 就得重写。
-
:checked无法读取其他控件的状态，只能响应自身变化 - 没有“与”“或”逻辑运算符，多个
:checked并列时是“或”关系，不是“且” - 无法触发副作用（如更新价格、显示缺货提示、发送埋点）
如何组织规格数据让 JS 处理更简单
最省事的方式是后端返回一个扁平化的 skus 数组，每个对象包含完整规格组合和库存状态，例如：
[{
"specs": { "color": "red", "size": "xl" },
"sku_id": "1001",
"stock": 5,
"price": 299
}, {
"specs": { "color": "blue", "size": "m" },
"sku_id": "1002",
"stock": 0,
"price": 299
}]
前端 JS 拿到这个数组后，只需遍历它，就能算出：当前已选 color=red 时，哪些 size 是有库存的；当前 color=red & size=xl 时，对应哪个 sku_id 和价格。
- 避免让 JS 去解析“红-M有货、红-L无货、蓝-M有货”这类字符串规则——容易漏 case，难测试
- 如果后端只能返回树状结构（如“颜色→尺码→库存”嵌套），前端需先 flatten 成上述数组，否则每次选规格都要递归遍历
- 务必在 HTML 中预留
data-sku-id和data-stock属性位置，JS 更新时直接写入，不重新渲染整块 DOM
点击规格项后，DOM 更新要注意什么
用户点一次“红色”，UI 要立刻高亮该选项、置灰不可选的尺码、更新价格、可能还要滚动到库存提示区。这些操作看似简单，但容易在细节上翻车：
- 不要用
innerHTML重绘整个规格区域——会丢失焦点、清空输入历史、触发不必要的 reflow - 高亮当前选中项时，别只改
class，同步设置aria-checked="true"，否则屏幕阅读器无法识别 - 禁用某尺码按钮后，记得移除其
tabindex或设为-1，否则键盘用户仍能聚焦到不可用项 - 价格数字变化时，用
Intl.NumberFormat格式化，而不是拼接"¥" + price—— 多语言站点会出错
最常被忽略的是“取消选择”逻辑：用户点了“红色”再点一次，是应该清空颜色，还是视为重复操作？HTML 里 radio 不支持取消，必须用 button + 手动管理选中态，且要处理空状态下的默认行为（比如首次进入页面是否自动选第一个？有没有“不限”选项？）
