html列表标签本身不能实现多选筛选，必须配合input或checkbox及javascript控制逻辑；列表仅负责语义分组与可访问性，选中状态、联动过滤与条件匹配均由js驱动。

用 HTML 列表标签（如 `

` `
• `）本身不能实现商品规格筛选的多选功能，它只是语义化容器；真正起作用的是配合 `` 或 ``，再通过 JavaScript 控制逻辑。列表结构只负责视觉分组和可访问性，选中状态、联动过滤、条件匹配都必须靠 JS 驱动。

  用 `

  ` + `
  • ` 包裹复选框，保持语义清晰

  把每个规格值（比如“红色”“蓝色”“S码”“M码”）放在 `

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
• ` 里，内部放标准 `` 或 ``，并统一命名：
  • 每个规格维度用独立 `
    `，便于 JS 按 `data-spec` 批量获取
  • 每个 `
  • ` 内部写 ``，不依赖文本内容判断，只读 `value`
  • 加上 `` 提升点击区域和无障碍支持，例如 ` 红色`
  • 避免直接在 `
  • ` 上加 `onclick` 或 `class="selected"`——状态应由 input 的 `checked` 属性反映

  多选筛选的核心：收集已选项 + 匹配商品 data 属性

  商品 DOM 需预埋对应规格数据，例如：
  `

  ...
  `
  • 点击任一 checkbox 后，用 `Array.from(document.querySelectorAll('input[name="color"]:checked')).map(cb => cb.value)` 获取当前所有选中的颜色值
  • 遍历所有 `.product` 元素，对每个检查是否满足全部已选条件：
    `el.getAttribute('data-color') === 'red' && el.getAttribute('data-size') === 'M'`
  • 只显示完全匹配的商品，其余设 `.hidden` 类或 `style.display = 'none'`
  • 空筛选条件时，显示全部商品（避免“全不选=全隐藏”的误操作）

  避免常见坑：别让列表标签干扰逻辑

  很多人误以为 `

  ` 能自动管理多选状态，其实它完全被动。关键注意事项：
  • 不要用 `
  • ` 模拟 checkbox——丢失键盘操作、无障碍支持和表单提交能力
  • 不要靠 `li.active` 这类 class 控制状态——JS 难以准确同步多个规格间的组合有效性
  • 不要把多个规格塞进同一个 `
    ` 里（比如颜色和尺码混排），必须按维度分组，否则 JS 无法区分 `data-spec` 类型
  • 禁用无效选项时，禁用的是 ``，不是 `
  • `；用 `input[aria-disabled="true"]` + CSS 控制样式，保留语义和焦点流

  补充：需要联动时，结构比样式更重要

  如果要求“选红色后，只显示有红色库存的尺码”，就必须提前准备好合法组合数据（如 `[{color:'red',size:'S'}, {color:'red',size:'M'}]`），并在每次选择后调用函数重新计算哪些 `` 应启用/禁用。这个逻辑与 `

  ` 无关，但良好的分组结构（每个 `
  `）能让 JS 快速定位并批量操作目标控件。

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