如何在页面加载及点击时对复选框列表排序（选中项优先升序）

原始HTML结构 #

先给你提供的复选框列表外层<ul>加上id，方便后续操作：

<ul id="checkboxList">
  <li>
    <input type="checkbox" id="a1" name="a[]" value="a1">
    <label for="a1">Alex</label>
  </li>
  <li>
    <input type="checkbox" id="a2" name="a[]" value="a2">
    <label for="a2">Mike</label>
  </li>
  <li>
    <input type="checkbox" id="a3" name="a[]" value="a3">
    <label for="a3">Bob</label>
  </li>
  <li>
    <input type="checkbox" id="a4" name="a[]" value="a4">
    <label for="a4">Anton</label>
  </li>
</ul>

JavaScript实现逻辑 #

用原生JS就能完成需求，核心是排序函数和事件监听：

const list = document.getElementById('checkboxList');

// 排序函数：选中项置顶并按字母升序，未选中项随后也按字母升序
function sortList() {
  const items = Array.from(list.querySelectorAll('li'));
  
  items.sort((a, b) => {
    // 优先按选中状态排序：选中的排前面
    const aChecked = a.querySelector('input[type="checkbox"]').checked;
    const bChecked = b.querySelector('input[type="checkbox"]').checked;
    
    if (aChecked !== bChecked) {
      return aChecked ? -1 : 1;
    }
    
    // 状态相同则按label文本升序排列
    const aText = a.querySelector('label').textContent.trim();
    const bText = b.querySelector('label').textContent.trim();
    
    return aText.localeCompare(bText);
  });
  
  // 重新挂载排序后的元素
  items.forEach(item => list.appendChild(item));
}

// 页面加载完成后执行初始排序
document.addEventListener('DOMContentLoaded', sortList);

// 给所有复选框绑定change事件，触发动态排序
list.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', sortList);
});

功能说明 #

• 初始排序：页面加载完成后，列表会自动按label文本的字母升序排列（最终顺序是Anton、Alex、Bob、Mike）。
• 动态调整：当你选中任意复选框时，所有选中项会自动移到列表顶部，并且选中项内部保持字母升序；未选中的项则在下方同样按字母升序排列。

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