本文介绍三种高效实现“单选式复选框”行为的方法：基于事件委托的纯 javascript 解决方案、结构更清晰的 addeventlistener 版本，以及语义更合理、推荐优先使用的 radio button 替代方案。
本文介绍三种高效实现“单选式复选框”行为的方法：基于事件委托的纯 javascript 解决方案、结构更清晰的 addeventlistener 版本，以及语义更合理、推荐优先使用的 radio button 替代方案。
在 Web 表单开发中，有时需要模拟单选（radio）行为但又希望保留复选框（）的视觉或交互习惯——即：点击任一复选框时，自动取消其他同组复选框的选中状态，仅保留当前项为选中。虽然从语义角度， 更符合此需求，但若因设计、框架限制或历史原因必须使用复选框，可通过 JavaScript 精准控制其行为。
✅ 推荐方案一：简洁的 forEach + onclick 一行式写法
const cbs = document.querySelectorAll(".checkboxes");
cbs.forEach(cb => cb.onclick = ev => cbs.forEach(c => c !== cb && (c.checked = false)));
该代码逻辑清晰：
- 使用 querySelectorAll 获取所有带 checkboxes 类的复选框，返回静态 NodeList；
- 为每个复选框绑定 onclick 事件处理器；
- 当任一复选框被点击时，遍历全部复选框，将非当前点击项的 checked 属性设为 false。
配套 HTML 示例：
<input type="checkbox" class="checkboxes" value="1"> 1<br><input type="checkbox" class="checkboxes" value="2"> 2<br><input type="checkbox" class="checkboxes" value="3"> 3<br><input type="checkbox" class="checkboxes" value="4"> 4<br><input type="checkbox" class="checkboxes" value="5"> 5<br><input type="checkbox" class="checkboxes" value="6"> 6<br>
⚠️ 注意：此写法覆盖了原生 onclick 属性，若页面中其他逻辑也依赖 onclick，建议改用 addEventListener（见下文）以支持多事件监听。
✅ 推荐方案二：可读性更强的 addEventListener 版本
const cbs = document.querySelectorAll(".checkboxes");
cbs.forEach(cb => {
cb.addEventListener("click", () => {
cbs.forEach(c => {
if (c !== cb) c.checked = false;
});
});
});
相比一行式写法，该版本显式声明了事件监听器，并采用嵌套 forEach + 条件判断，便于调试与后续扩展（如添加动画、触发回调等）。它完全避免了属性覆盖问题，是生产环境更稳妥的选择。
✅ 最佳实践：语义优先 —— 改用 Radio Button（附反选支持）
严格来说，单选互斥行为应由 原生支持。只需统一 name 属性即可实现浏览器级互斥：
<input type="radio" name="selection" class="checkboxes" value="1"> 1<br><input type="radio" name="selection" class="checkboxes" value="2"> 2<br><input type="radio" name="selection" class="checkboxes" value="3"> 3<br><!-- 其余类同 -->
但默认 radio 不支持“再次点击取消选中”。若需此功能，可添加轻量脚本：
document.querySelectorAll('input[type="radio"].checkboxes').forEach(radio => {
radio.addEventListener('click', function() {
// 若已选中，点击则取消；否则保持选中
if (this.checked) {
this.checked = false;
// 可选：清除对应 name 下所有 radio 的 checked 状态
document.querySelectorAll(`input[type="radio"][name="${this.name}"]`)
.forEach(r => r !== this && (r.checked = false));
}
});
});
或更简洁的单行版（兼容性良好）：
document.querySelectorAll('input[type="radio"].checkboxes').forEach(r =>
r.onclick = () => r.checked = !r.checked
);
✅ 总结建议：
- 语义正确性优先：能用 radio 就不用 checkbox 模拟单选；
- 若必须用 checkbox，请选用 addEventListener 方案，兼顾可维护性与兼容性；
- 避免直接操作 getElementsByClassName 返回的动态 HTMLCollection（如原问题中 numbers.length 未定义、索引越界风险高），始终优先使用 querySelectorAll + forEach；
- 所有脚本应在 DOM 加载完成后执行（如包裹于 DOMContentLoaded 或置于 底部）。
