如何显示checkbox被勾选的顺序？首个勾选显示a、第二个显示b以此类推

你可以通过原生JS实现该需求，不需要修改原有HTML结构，完整可运行代码如下：

<!-- 原有HTML结构 -->
<ul class="dropdown-content checkboxes">
  <li>
    <label>
      <input type="checkbox" />
      Billy
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Jacob
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Bob
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Alexandren
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Erren
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Stewgart
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Jillian
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      Other
    </label>
  </li>
</ul>

<!-- 标记样式 可根据需求自行调整 -->
<style>
.check-order-tag {
  display: inline-block;
  margin-left: 6px;
  color: #2196F3;
  font-weight: bold;
}
</style>

<!-- 逻辑代码 -->
<script>
// 按勾选顺序存储已选中的checkbox元素
const checkedList = [];
// 获取所有目标checkbox
const checkboxes = document.querySelectorAll('.checkboxes input[type="checkbox"]');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      // 勾选时追加到数组末尾
      checkedList.push(this);
    } else {
      // 取消勾选时从数组中移除对应元素
      const index = checkedList.indexOf(this);
      if (index > -1) checkedList.splice(index, 1);
    }
    // 操作完成后更新所有字母标记
    updateCheckTags();
  })
})

function updateCheckTags() {
  // 先清空所有已有的标记
  document.querySelectorAll('.check-order-tag').forEach(tag => tag.remove());
  // 遍历当前已选列表，按顺序生成对应字母标记
  checkedList.forEach((checkbox, index) => {
    const tag = document.createElement('span');
    tag.className = 'check-order-tag';
    // 索引转小写字母：0对应a、1对应b，依次类推
    tag.textContent = String.fromCharCode(97 + index);
    checkbox.parentElement.appendChild(tag);
  })
}
</script>

逻辑说明 #

• 用数组checkedList按勾选先后顺序存储已选中的checkbox元素，保证顺序完全符合勾选操作的先后
• 每次勾选/取消勾选操作后，先清空所有现有标记，再重新给当前已选元素按顺序分配字母
• 字母生成逻辑利用ASCII码转换，97是小写字母a的ASCII值，加上数组索引即可得到对应顺序的字母
• 取消任意勾选后，剩余已选元素的标记会自动重新排序，始终按当前勾选的先后顺序展示

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