JQuery实现复选框列表排序：已选项加载时置顶，取消选中恢复字母序

你的代码只处理了复选框的点击变更事件，但页面加载时没主动处理已勾选的行，所以这些行不会自动跳到顶部。下面是修正后的代码，同时优化了逻辑，完全匹配你的需求：

修正后的代码 #

JavaScript #

$(document).ready(function() {
  const tableBody = $("#vm_table tbody");

  // 统一处理表格排序逻辑
  function updateTableOrder() {
    // 拆分已勾选和未勾选的行
    const checkedRows = tableBody.find("input[type='checkbox']:checked").closest("tr");
    const uncheckedRows = tableBody.find("input[type='checkbox']:not(:checked)").closest("tr");

    // 未勾选的行按字母排序
    uncheckedRows.sort((a, b) => {
      const textA = $(a).find("td:first-child").text().trim();
      const textB = $(b).find("td:first-child").text().trim();
      return textA.localeCompare(textB);
    });

    // 先放已勾选的行，再放排序后的未勾选行
    tableBody.empty().append(checkedRows).append(uncheckedRows);
  }

  // 页面加载完成后立即执行一次排序
  updateTableOrder();

  // 监听复选框状态变化
  $("input[type='checkbox']").on("change", updateTableOrder);
});

HTML（保持原代码不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="vm_table">
   <thead>
      <tr>
         <th scope="col">A-Z</th>
         <th scope="col">Class</th>
      </tr>
   </thead>
   <tbody>
      <!-- 原表格行内容全部保留 -->
      <tr class="clickable_vm">
         <td>
            <label for="218">
            <input type="checkbox" name="vms" value="218" class="displaynone" id="218">A
            </label>
         </td>
         <td class="schedule-name" id="schname">
            A1<br>
         </td>
      </tr>
      <!-- ... 其他行省略 ... -->
   </tbody>
</table>

核心改进说明 #

1. 初始化排序：新增updateTableOrder函数，页面加载时自动运行，把已勾选的行移到顶部，未勾选的按字母排序，解决了加载时不置顶的问题。
2. 统一事件处理：不管是勾选还是取消勾选，都调用同一个排序函数，确保状态变更后列表始终符合规则。
3. 排序优化：添加.trim()处理文本，避免因换行或空格导致排序错误。

如果你的需求是「只要取消任意一个勾选，整个列表就恢复纯字母顺序」，可以把updateTableOrder改成下面这样：

function updateTableOrder() {
  const hasCheckedItems = tableBody.find("input[type='checkbox']:checked").length > 0;
  
  if (hasCheckedItems) {
    // 还有勾选项时：已勾选置顶，未勾选按字母排序
    const checkedRows = tableBody.find("input[type='checkbox']:checked").closest("tr");
    const uncheckedRows = tableBody.find("input[type='checkbox']:not(:checked)").closest("tr");
    
    uncheckedRows.sort((a, b) => {
      const textA = $(a).find("td:first-child").text().trim();
      const textB = $(b).find("td:first-child").text().trim();
      return textA.localeCompare(textB);
    });
    
    tableBody.empty().append(checkedRows).append(uncheckedRows);
  } else {
    // 无勾选项时：全表按字母排序
    tableBody.find("tr").sort((a, b) => {
      const textA = $(a).find("td:first-child").text().trim();
      const textB = $(b).find("td:first-child").text().trim();
      return textA.localeCompare(textB);
    }).appendTo(tableBody);
  }
}

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