如何为选中的复选框按上下顺序添加序号标识？

需要为页面上从上到下排列的选中复选框添加序号标识，效果如下：

[1] checkbox
    checkbox
    checkbox
[2] checkbox
    checkbox
[3] checkbox

注意：序号仅按页面从上到下的顺序排列，与用户选中顺序无关

页面的HTML结构（动态渲染，仅能有限修改）：

<td>
   <label>
      <input type="checkbox">
      "Sample text"
   </label>
</td>
<td>
   <label>
      <input type="checkbox">
      "Sample text"
   </label>
</td>
<td>
   <label>
      <input type="checkbox">
      "Sample text"
   </label>
</td>
<!-- 更多td结构 -->

尝试的代码及问题 #

1. 第一段jQuery代码：

$('input[type=checkbox]').on('change', function(){
    var number = $('input[type=checkbox]:checked').length;
    $('label:has(input[type=checkbox]:checked)').text(number);
});

问题：会把所有选中复选框的label内容替换成同一个数字，无法实现逐个递增的序号。

2. 第二段原生JS代码：

document.querySelectorAll('td').forEach(el => {
  el.innerHTML += '<span class="letter"> </span>'
})
let checkedItems=[]
document.querySelectorAll('[type=checkbox]').forEach(el => {
el.value = el.closest('label').innerText.trim()
  el.addEventListener('change', e => {
    let n = el.closest('label').innerText.trim();
    if (!e.target.checked)  checkedItems.splice(checkedItems.indexOf(n),1)
    else checkedItems.push(n);
    document.querySelectorAll('.letter').forEach( l=> l.innerHTML = '')
    checkedItems.forEach((n,i) => {
    document.querySelector(`input[value=${n}]`).closest('td').querySelector('.letter').innerHTML = i;
    })
 
  });

});

问题：input[value=${n}]无法匹配input值（label文本含特殊字符，赋值给value后选择器无法正确匹配），导致报错。

以下提供两种修改方案，分别基于jQuery和原生JS：

方案一：修改jQuery代码 #

核心思路：每次复选框状态变化时，重新遍历所有复选框（从上到下），给选中的按顺序编号，同时保留原label文本内容。

$('input[type=checkbox]').on('change', function() {
    let count = 0;
    // 从上到下遍历所有复选框
    $('input[type=checkbox]').each(function() {
        const $label = $(this).closest('label');
        // 清除之前的序号标识
        $label.html($label.html().replace(/^\[\d+\]\s*/, ''));
        if ($(this).is(':checked')) {
            count++;
            // 在label开头添加序号
            $label.prepend(`[${count}] `);
        }
    });
});

方案二：修改原生JS代码 #

核心思路：放弃用label文本作为匹配标识，直接用复选框元素本身跟踪选中状态，避免选择器匹配问题；同时按页面顺序重新排序选中项后编号。

// 为每个td添加序号容器
document.querySelectorAll('td').forEach(el => {
  const span = document.createElement('span');
  span.className = 'serial-number';
  // 将序号容器放在label前，不干扰原文本
  el.insertBefore(span, el.querySelector('label'));
});

// 监听复选框状态变化
document.querySelectorAll('[type=checkbox]').forEach(el => {
  el.addEventListener('change', () => {
    // 清空所有序号
    document.querySelectorAll('.serial-number').forEach(span => {
      span.textContent = '';
    });
    
    // 获取所有选中的复选框，按页面从上到下顺序排列
    const checkedBoxes = Array.from(document.querySelectorAll('[type=checkbox]:checked'));
    
    // 为每个选中项添加对应序号
    checkedBoxes.forEach((box, index) => {
      const serialSpan = box.closest('td').querySelector('.serial-number');
      serialSpan.textContent = `[${index + 1}] `;
    });
  });
});

说明 #

• 两种方案均按页面从上到下的顺序生成序号，与用户选中顺序无关；
• 方案一依赖jQuery，适合已引入该库的项目；方案二为原生JS实现，无依赖；
• 均不会破坏原label的文本内容，仅在开头添加序号标识。

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