ColdFusion实现：行内复选框互斥单选，兼容单复选可切换的CSS/JS方案

• 实现思路非常简单，通过几行原生JS绑定复选框的选中事件，选中某一项时自动取消同组其他选项的选中状态即可。这套逻辑天然兼容单个复选框的场景，完全不需要依赖RadioButton组件，也就不会出现单选项无法取消勾选的问题。

需要先修正原有代码的常见问题 #

• 之前尝试用设置ID的方式没达到预期，核心原因是现有代码里两个复选框写了完全相同的ID。HTML规范要求页面内ID必须全局唯一，重复ID会导致DOM元素获取、事件绑定出现随机异常，这是需要先调整的基础问题。
• 给同组需要互斥的复选框添加统一的类名标记，替代重复的ID，同时保留两个复选框独立的name属性，完全不改动原有表单的提交逻辑。

<!-- 双角色场景：同时展示球员、守门员选项 -->
<label>
  <input type="checkbox" name="PLAYER" class="identity-checkbox" value="#shinid#"> 参赛球员
</label>
<label>
  <input type="checkbox" name="GOALIE" class="identity-checkbox" value="#shinid#"> 守门员
</label>

<!-- 无守门员场景：仅展示球员单个选项 -->
<label>
  <input type="checkbox" name="PLAYER" class="identity-checkbox" value="#shinid#"> 参赛球员
</label>

极简原生JS实现（无任何第三方依赖） #

// 给所有带互斥标记的复选框绑定选中事件
document.querySelectorAll('.identity-checkbox').forEach(item => {
  item.addEventListener('change', function () {
    // 仅在当前选项被选中时，取消同组其他选项的选中状态
    if (this.checked) {
      document.querySelectorAll('.identity-checkbox').forEach(sibling => {
        if (sibling !== this) sibling.checked = false
      })
    }
  })
})

方案适配优势 #

• 完全满足双选项互斥要求：任意一个选项被选中时，同组另一个选项会自动取消勾选，不会出现两个同时选中的情况
• 完美适配单选项场景：单个复选框不存在同组其他元素，用户可以随时取消勾选，不存在RadioButton一旦选中就无法取消的问题
• 对原有代码侵入性极低：不需要修改原有CSS样式、不需要改动表单字段的name属性，后端接收PLAYER/GOALIE字段的原有逻辑完全可以沿用
• 如果不同活动存在多组独立的身份选择框，只需要给每组加带活动标识的自定义类名（比如act001-identity、act002-identity），修改JS里的选择器即可实现组内独立互斥，不会跨组干扰

因为已经规划了后端做双重校验，这套前端逻辑仅用于优化交互体验，就算用户绕过前端直接构造提交请求，后端校验也能兜底，完全没有业务风险。

内容的提问来源于stack exchange，提问作者Merle_the_Pearl