实现单问题仅勾选一个Checkbox的JavaScript循环控制需求

嗨，我看你想给页面里的多个问题组实现“每个问题仅能勾选一个复选框”的功能，你的现有代码有点小问题，我来帮你调整优化一下，同时给你更简洁健壮的实现方案！

先说说你原代码里的几个小问题 #

• 索引越界错误：for(j=0;j<=nbchk;j++) 这里的循环条件有问题，因为getElementsByTagName返回的元素集合长度是元素总数，索引是从0到length-1，用<=会导致访问不存在的元素，引发报错。
• 不必要的全局遍历：每次点击复选框都遍历所有问题组，其实只需要处理当前点击的那个问题所在的组就够了，完全没必要浪费资源遍历全部。
• 逻辑不够直观：用计数判断再弹提示的方式，用户体验不如直接取消其他选项来得顺畅。

优化后的复选框单选实现方案 #

我们可以通过更简洁的JS逻辑，结合DOM选择器来实现，同时让代码更灵活健壮：

第一步：调整HTML结构（给每个问题组加统一类名）

<!-- 问题组1 -->
<div class="question-group" id="divchk_0">
  <input name="nom_0_0" id="nom_0_0" value="148" type="checkbox" onclick="verifChk(this)">
  <label for="nom_0_0">a</label> 148 <br>
  <input name="nom_0_1" id="nom_0_1" value="149" type="checkbox" onclick="verifChk(this)">
  <label for="nom_0_1">b</label> 149 <br>
  <input name="nom_0_2" id="nom_0_2" value="150" type="checkbox" onclick="verifChk(this)">
  <label for="nom_0_2">c</label> 150 <br>
</div>

<!-- 问题组2 -->
<div class="question-group" id="divchk_1">
  <input name="nom_1_0" id="nom_1_0" value="151" type="checkbox" onclick="verifChk(this)">
  <label for="nom_1_0">x</label> 151 <br>
  <input name="nom_1_1" id="nom_1_1" value="152" type="checkbox" onclick="verifChk(this)">
  <label for="nom_1_1">y</label> 152 <br>
</div>

这里把onclick的参数改成this，直接传递当前点击的复选框元素，不用依赖id命名，更灵活。

第二步：优化JS函数

function verifChk(currentChk) {
  // 获取当前复选框所在的问题组容器
  const questionGroup = currentChk.closest('.question-group');
  // 获取该组内所有的复选框
  const allCheckboxes = questionGroup.querySelectorAll('input[type="checkbox"]');
  
  // 如果当前复选框被选中，就取消同组其他复选框的选中状态
  if (currentChk.checked) {
    allCheckboxes.forEach(checkbox => {
      if (checkbox !== currentChk) {
        checkbox.checked = false;
      }
    });
  }

  // 可选需求：如果不允许用户取消已选中的选项，取消下面的注释
  // else {
  //   currentChk.checked = true;
  // }
}

为什么这个方案更好？ #

• 高效精准：只处理当前点击的问题组，不会遍历所有组浪费性能
• 健壮灵活：用closest和querySelectorAll获取元素，不依赖id的命名规则，就算后续调整问题组的id或结构，代码也不用大改
• 用户体验好：直接取消其他选项，不用弹出提示框打断用户操作，更符合直觉

额外推荐：用原生Radio按钮实现（更简单） #

如果没有特殊需求必须用复选框，其实原生的**单选按钮（radio）**是更合适的选择，浏览器原生就支持单选逻辑，完全不需要写JS：

<!-- 问题组1：所有radio的name属性保持一致 -->
<div id="divchk_0">
  <input name="question_0" id="nom_0_0" value="148" type="radio">
  <label for="nom_0_0">a</label> 148 <br>
  <input name="question_0" id="nom_0_1" value="149" type="radio">
  <label for="nom_0_1">b</label> 149 <br>
</div>

<!-- 问题组2：name属性设为另一个唯一值 -->
<div id="divchk_1">
  <input name="question_1" id="nom_1_0" value="151" type="radio">
  <label for="nom_1_0">x</label> 151 <br>
  <input name="question_1" id="nom_1_1" value="152" type="radio">
  <label for="nom_1_1">y</label> 152 <br>
</div>

只需要保证同一个问题组内的radio按钮name属性相同，不同组的name不同，浏览器就会自动处理单选逻辑，既省心又符合用户的使用习惯。

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