可点击动态步进器问题修复：中间复选框无法取消选中

问题分析 #

你的核心问题是：当前逻辑仅实现了选中首尾复选框时自动勾选中间项，但在用户主动取消中间项时，代码会强制覆盖用户操作，重新将中间项设为选中状态——这是因为你没有区分「自动联动选中」和「用户手动操作」的场景。

具体修改方案 #

1. 给复选框添加手动操作标记 #

在每个复选框元素上添加自定义属性data-auto-checked，用来标记该项是自动联动选中还是用户手动操作：

• 初始状态设为空或false
• 自动联动选中时设为true
• 用户手动点击时设为false

2. 调整事件处理逻辑 #

修改复选框的change事件代码，只对未被手动操作过的项进行自动联动：

// 替换成你的复选框选择器
document.querySelectorAll('.step-checkbox').forEach(checkbox => {
  checkbox.addEventListener('change', function(e) {
    // 标记当前项为用户手动操作
    this.dataset.autoChecked = 'false';
    
    const allCheckboxes = Array.from(document.querySelectorAll('.step-checkbox'));
    const currentIdx = allCheckboxes.indexOf(this);
    const checkedItems = allCheckboxes.filter(cb => cb.checked);

    if (checkedItems.length >= 2) {
      const firstCheckedIdx = allCheckboxes.indexOf(checkedItems[0]);
      const lastCheckedIdx = allCheckboxes.indexOf(checkedItems.at(-1));
      
      // 仅自动勾选未被手动操作过的中间项
      allCheckboxes.slice(firstCheckedIdx, lastCheckedIdx + 1).forEach(cb => {
        if (cb.dataset.autoChecked !== 'false') {
          cb.checked = true;
          cb.dataset.autoChecked = 'true';
          // 同步你的选中类名，替换成实际类名即可
          cb.classList.add('active-step');
        }
      });
    } else {
      // 当选中项不足2个时，清除自动选中的项
      allCheckboxes.forEach(cb => {
        if (cb.dataset.autoChecked === 'true') {
          cb.checked = false;
          cb.dataset.autoChecked = '';
          cb.classList.remove('active-step');
        }
      });
    }
  });
});

3. 初始化处理 #

页面加载完成后，给所有复选框初始化标记：

document.querySelectorAll('.step-checkbox').forEach(cb => {
  cb.dataset.autoChecked = cb.checked ? 'false' : '';
});

效果说明 #

修改后：

• 选中首尾复选框时，未被手动操作过的中间项依然会自动选中
• 用户手动取消过的中间项会被标记为「手动操作」，后续自动联动逻辑不会再强制勾选它
• 当选中项不足2个时，所有自动选中的项会被取消选中

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