嗨，这个需求我之前做类似表单交互时碰到过，给你分享几个实用的思路，亲测靠谱！

思路1：实时验证选中项的连续性 #

这个方法的核心是跟踪每个复选框的序号，每次用户操作后验证选中集合是否符合连续3个的要求：

1. 给复选框标记序号：给每个复选框加自定义属性data-index，比如ch1对应data-index="1"，ch2对应data-index="2"，以此类推，方便快速获取选中项的位置。
2. 收集并排序选中项：每次勾选/取消复选框时，提取所有已选中复选框的data-index，转成数字数组并排序。
3. 双重验证逻辑：
   • 先验证数量（你已经掌握的限制逻辑，确保不超过3个）；
   • 再验证连续性：排序后的数组必须满足「第二个元素 = 第一个+1」且「第三个元素 = 第二个+1」，也就是形成连续递增的序列。
4. 拦截非法操作：如果验证失败，取消当前勾选，或者给用户友好提示。

代码示例 #

// 给所有复选框绑定变更事件
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 收集已选中复选框的索引并排序
    const selectedIndexes = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
      .map(cb => parseInt(cb.dataset.index, 10))
      .sort((a, b) => a - b);

    // 验证数量限制
    if (selectedIndexes.length > 3) {
      this.checked = false;
      alert('最多只能选择3个选项哦');
      return;
    }

    // 验证连续性（选中3个时触发）
    if (selectedIndexes.length === 3) {
      const isConsecutive = selectedIndexes[1] === selectedIndexes[0] + 1 
                          && selectedIndexes[2] === selectedIndexes[1] + 1;
      if (!isConsecutive) {
        this.checked = false;
        alert('请选择连续的三个选项哦');
      }
    }
  });
});

思路2：预设合法组合进行匹配 #

如果你的复选框数量不多（比如这里只有6个），可以提前把所有合法的连续组合列出来，每次用户操作后直接匹配验证：

1. 定义合法组合：针对6个复选框，合法的连续3元组只有[1,2,3]、[2,3,4]、[3,4,5]、[4,5,6]这4种。
2. 匹配验证：收集选中项的索引数组并排序后，检查它是否在预设的合法组合列表里。
3. 拦截非法操作：不在列表里就取消当前勾选或提示用户。

代码示例 #

// 预设所有合法的连续组合
const validCombos = [
  [1, 2, 3],
  [2, 3, 4],
  [3, 4, 5],
  [4, 5, 6]
];

document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const selectedIndexes = Array.from(document.querySelectorAll('input[type="checkbox"]:checked'))
      .map(cb => parseInt(cb.dataset.index, 10))
      .sort((a, b) => a - b);

    if (selectedIndexes.length > 3) {
      this.checked = false;
      alert('最多只能选择3个选项哦');
      return;
    }

    if (selectedIndexes.length === 3) {
      // 检查是否匹配合法组合
      const isValid = validCombos.some(combo => 
        combo.every((num, idx) => num === selectedIndexes[idx])
      );
      if (!isValid) {
        this.checked = false;
        alert('请选择连续的三个选项哦');
      }
    }
  });
});

额外优化建议 #

• 把生硬的alert换成页面内的文本提示（比如在表单下方显示错误信息），用户体验会更好；
• 如果需要严格限制勾选顺序（比如必须按从左到右逐个选，不能跳着选），可以跟踪勾选的顺序数组，每次新勾选的项必须是当前选中集合的「前一个」或「后一个」，这样就能强制用户按连续顺序勾选。

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