<details>标签本身不支持多选框，需用其包裹<input type="checkbox">并手动实现交互逻辑；复选框必须置于<summary>之后而非内部，否则点击会误触发折叠；需用label[for]绑定、处理焦点管理、JS收集选中值，并注意IE兼容性及样式限制。
details 标签本身不支持多选框，必须手动组合实现
<details> 只提供展开/收起的容器语义，没有内置表单控件能力。想实现“带多选框的下拉列表”，本质是用 <details> 包裹一组 <input type="checkbox">，并自行处理交互逻辑。
常见错误现象：直接在 <summary> 里放 <input>，导致点击复选框时触发折叠；或忽略 tabindex 和键盘可访问性，让屏幕阅读器无法识别选项。
- 把所有
<input type="checkbox">放在<details>内部、<summary>之后的位置，**不要塞进<summary>里** - 为每个
<input>添加id，并用<label for="xxx">包裹文字，确保点击文字也能切换状态 - 给
<details>加上open属性（可选），避免首次加载时完全不可见
如何避免点击复选框时意外关闭 details 面板
默认行为下，<summary> 是唯一可点击触发折叠的区域；但若复选框放在 <summary> 内，浏览器会把整个 <summary> 当作一个点击热区，点哪都收起。
正确做法是分离交互区域：让 <summary> 仅负责控制展开，所有复选框放在它下面的独立区块中。
立即学习“前端免费学习笔记（深入）”；
<details>
<summary>选择颜色</summary>
<div class="checkbox-list">
<label><input type="checkbox" name="color" value="red"> 红色</label>
<label><input type="checkbox" name="color" value="blue"> 蓝色</label>
</div>
</details>
- 绝对不要写成：
<summary><input type="checkbox"> 选项</summary> - 如果需要视觉上紧凑，用 CSS 控制
.checkbox-list的 margin/padding，而不是强行塞进<summary> - 移动端要注意
touch-action或防止误触，必要时加pointer-events: none到<summary>的子元素（但别加在<label>上）
如何获取用户选中的值（JavaScript 绑定）
不能依赖 <details> 自身提交数据——它不是表单控件。所有 checkbox 值需通过 JS 主动收集，通常绑定在表单提交或按钮点击事件上。
关键点在于：多个同名 name 的 checkbox 提交时只传选中的值，但 JS 获取时得遍历 DOM 手动筛选。
- 用
document.querySelectorAll('input[name="xxx"]:checked')拿到所有已勾选项 - 用
.map(el => el.value)提取值数组，例如["red", "green"] - 如果要响应实时变化，监听
change事件，但注意事件委托更稳妥（尤其动态增删选项时） - 别用
click代替change，否则空格键切换、屏幕阅读器操作会失效
兼容性和样式限制你必须知道
<details> 在 IE 中完全不支持，Safari 12+ 才支持 open 属性动画；而 checkbox 样式自定义在各浏览器中差异大，尤其 <summary> 的默认三角图标无法用 CSS 直接替换（需用 ::marker，且仅 Chromium/Firefox 支持）。
- 如需 IE 支持，必须降级为
<div>+ JS toggle，不能只靠<details> - 用
details[open] .checkbox-list控制显示/隐藏，比 JS 切 class 更语义化，也利于 SSR - 避免对
<summary>设置display: flex后内部文字换行异常，建议用align-items: center替代
最易被忽略的是焦点管理：展开后，按 Tab 键应能依次进入每个 checkbox；收起时，焦点应回到 <summary>。这需要手写 focus() 和 tabindex 控制，不是默认行为。
