如何检测fieldset中首个被勾选的Checkbox及勾选顺序？

嘿，我懂你要实现的功能——追踪fieldset里复选框的勾选顺序，包括第一个被选中的选项。之前用数组存值没生效，大概率是事件绑定或者逻辑细节上出了小问题，咱们一步步来搞定它～

我们需要给fieldset里的所有复选框绑定状态变化的事件，然后维护一个数组来记录勾选顺序，同时标记第一个被勾选的选项。这里分两种常见需求来实现：

1. 记录所有勾选操作的顺序（包含重复勾选） #

如果需要追踪用户每一次勾选的操作（哪怕之后取消了，也保留历史顺序），可以用下面的代码：

HTML结构示例 #

<fieldset id="checkboxGroup">
  <label><input type="checkbox" value="option1"> 选项1</label>
  <label><input type="checkbox" value="option2"> 选项2</label>
  <label><input type="checkbox" value="option3"> 选项3</label>
  <label><input type="checkbox" value="option4"> 选项4</label>
</fieldset>
<!-- 用来展示结果的元素 -->
<p>首个勾选的选项：<span id="firstChecked"></span></p>
<p>所有勾选操作顺序：<span id="checkOrder"></span></p>

JavaScript代码 #

// 获取容器和结果展示元素
const checkboxGroup = document.getElementById('checkboxGroup');
const firstCheckedEl = document.getElementById('firstChecked');
const checkOrderEl = document.getElementById('checkOrder');

// 存储所有勾选操作的数组
const checkOrder = [];
// 标记首个被勾选的选项
let firstChecked = null;

// 用事件委托绑定change事件（不管复选框是静态还是动态生成的都能生效）
checkboxGroup.addEventListener('change', (e) => {
  const target = e.target;
  // 确保触发事件的是复选框
  if (target.type === 'checkbox') {
    if (target.checked) {
      // 只有当复选框被勾选时，才记录到数组
      checkOrder.push(target.value);
      // 如果还没记录首个勾选，就更新它
      if (!firstChecked) {
        firstChecked = target.value;
        firstCheckedEl.textContent = firstChecked;
      }
      // 更新页面展示的顺序
      checkOrderEl.textContent = checkOrder.join(', ');
    }
    // 取消勾选时不做处理，因为我们要保留所有勾选操作的历史
  }
});

2. 记录当前处于勾选状态的顺序 #

如果你的需求是只追踪当前保持勾选的选项的先后顺序（取消勾选就从列表移除，再次勾选则追加到末尾），可以调整代码如下：

JavaScript代码 #

const checkboxGroup = document.getElementById('checkboxGroup');
const firstCheckedEl = document.getElementById('firstChecked');
const checkOrderEl = document.getElementById('checkOrder');

// 存储当前勾选的选项顺序
const activeChecks = [];
let firstChecked = null;

checkboxGroup.addEventListener('change', (e) => {
  const target = e.target;
  if (target.type === 'checkbox') {
    const value = target.value;
    if (target.checked) {
      // 勾选时，先检查是否已经在数组里（避免重复添加）
      if (!activeChecks.includes(value)) {
        activeChecks.push(value);
        // 首次勾选时记录首个选项
        if (!firstChecked) {
          firstChecked = value;
          firstCheckedEl.textContent = firstChecked;
        }
      }
    } else {
      // 取消勾选时，从数组中移除对应选项
      const index = activeChecks.indexOf(value);
      if (index !== -1) {
        activeChecks.splice(index, 1);
      }
    }
    // 更新页面展示的当前勾选顺序
    checkOrderEl.textContent = activeChecks.join(', ');
  }
});

• 事件绑定问题：如果是给每个复选框单独绑定事件，可能漏掉了某些元素，或者动态生成的复选框没有绑定到；用fieldset的事件委托（上面代码的写法）就能避免这个问题。
• 逻辑判断缺失：可能没有判断复选框是否处于checked状态就往数组推值，导致取消勾选时也添加了错误数据。
• 重复值处理：没有检查值是否已经在数组里，导致重复记录同一个选项。

内容的提问来源于stack exchange，提问作者T.sagiv