for 属性只接受单个 id 值，不支持空格或逗号分隔的多个 id；浏览器仅识别第一个 id，其余被忽略，且违反 html 规范与可访问性要求。
HTML for 属性不支持多个 id
直接说结论：for 属性只接受单个 id 值，不能写成 for="id1 id2" 或逗号分隔。浏览器会忽略空格后的内容，实际只绑定第一个 id（比如 for="id1 id2" 等价于只绑 id1），甚至可能完全失效。
这是 HTML 规范明确限定的——for 是 <label></label> 的属性，设计初衷就是一对一关联单个表单控件。强行塞多个 id 不仅无效，还会让可访问性（a11y）工具误判，屏幕阅读器通常只读取第一个匹配控件。
想让一个 <label></label> 控制多个控件？用 JavaScript 模拟
原生 HTML 不行，但常见需求（比如“全选”标签、批量操作说明）可以通过 JS 实现语义等效效果：
- 给目标控件统一加
class或data-group，避免硬编码多个id - 在
<label></label>上监听click，用document.querySelectorAll()批量操作 - 确保同时更新
aria-expanded或aria-checked（如适用），维持可访问性
示例：
<label>
全选所有复选框
<input type="checkbox" class="batch-toggle"></label>
<input type="checkbox" class="item" value="a"><input type="checkbox" class="item" value="b"><input type="checkbox" class="item" value="c"><script>
document.querySelector('.batch-toggle').addEventListener('change', e => {
document.querySelectorAll('.item').forEach(cb => cb.checked = e.target.checked);
});
</script>
多个值计算结果展示，别硬套 <label for="..."></label>
如果目标是「展示多个输入字段的实时计算结果」（比如价格 × 数量 + 运费），<label></label> 不是合适载体：
-
<label></label>语义是「描述控件」，不是「显示动态输出」 - 计算结果应放在
<output></output>（专为此设计）、<span></span>或<div> 中 <li>用 <code>aria-live="polite"让屏幕阅读器感知变化，比依赖for更可靠 - 避免把计算逻辑塞进
for属性里——它只是字符串，无法解析表达式
正确做法是监听相关 <input> 的 input 事件，手动计算并更新目标元素内容。
容易被忽略的兼容性细节
某些旧版 Safari（≤15.4）对 <output></output> 的 for 属性支持不完整——它允许写多个 id（如 <output for="a b c"></output>），但实际只响应第一个变化。这不是标准行为，而是 bug 级别实现，不应依赖。
更稳妥的方式是：放弃 <output for="..."></output> 的自动绑定，改用 JS 显式监听所有源字段。这样既可控，又规避了浏览器差异和未来规范变动风险。
