在每个复选框旁边显示选中复选框的顺序

Question

我有许多复选框的列表，我需要显示它们被选中的顺序。 是这样的：

[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>
etc.

所以我尝试了以下方法：

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

但它最终将每个 label 内容替换为 1（甚至不是计数）。

我在 Stackoverflow 上搜索了答案，我找到了最合适的答案：

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;
    })
 
  });

});

在这种情况下，我收到由输入值引起的错误，因为它不是字母数字。我可以通过什么方式编辑其中任何一个才能工作？谢谢！

Answer 1

如果我理解正确，您希望在复选框本身旁边显示选中特定复选框的顺序（在所有复选框中），那么以下可能会起作用？

querySelectorAll 可以与 :checked 属性选择器结合使用，以查找已检查元素的数量，然后在新的 span 元素中使用，当委托事件侦听器触发 @987654325 时，该元素附加到 label 元素@ 事件

document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='checkbox' ){
    let index=document.querySelectorAll('table [type="checkbox"]:checked').length;
    let label=e.target.parentNode;
    
    if( e.target.checked ){
      let span=document.createElement('span');
          span.textContent=index;
      label.appendChild( span )
    }else{
      label.removeChild( label.querySelector('span') )
    }
  }
});

<table>
  <tr>
    <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>
  </tr>
</table>

Answer 2

添加跨度作为数字的容器：

<label>
    <input type="checkbox">
    <span class="nr"></span>Text X
</label>

然后脚本将是：

const cbs = $("input[type=checkbox]");
      cbs.click(function() {
          let order = 0;

          cbs.each(function(i,o) {
              const nr = $(o).next();
              if(o.checked) {
                  order++;
                  nr.html(order);
              } else {
                  nr.html("");
              }
          });
        });