如何检测多个checkbox选中状态并获取选中项实现名称列表排序

核心实现思路 #

不用逐个通过ID判断复选框状态，直接通过选择器批量获取同组复选框，再筛选出已勾选的选项，最后根据选项执行排序逻辑。以下是具体代码示例：

完整代码示例（原生JavaScript） #

HTML结构

<!-- 排序选项复选框 -->
<label><input type="checkbox" name="sortOption" value="asc"> 名称升序</label>
<label><input type="checkbox" name="sortOption" value="desc"> 名称降序</label>

<!-- 名称列表 -->
<ul id="nameList">
  <li>Bob</li>
  <li>Alice</li>
  <li>Charlie</li>
</ul>

JavaScript逻辑

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 批量获取同组排序复选框
  const sortCheckboxes = document.querySelectorAll('input[name="sortOption"]');
  const nameList = document.getElementById('nameList');
  // 保存原始名称数组，避免重复排序导致错乱
  const originalNames = Array.from(nameList.children).map(li => li.textContent);

  // 为每个复选框绑定状态变化事件
  sortCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', handleSort);
  });

  // 排序处理函数
  function handleSort() {
    // 筛选出所有已勾选的选项值
    const checkedOptions = Array.from(sortCheckboxes)
      .filter(cb => cb.checked)
      .map(cb => cb.value);

    // 根据勾选选项执行排序
    let sortedNames = [...originalNames];
    if (checkedOptions.includes('asc')) {
      sortedNames.sort((a, b) => a.localeCompare(b));
    }
    if (checkedOptions.includes('desc')) {
      sortedNames.sort((a, b) => b.localeCompare(a));
    }

    // 更新页面列表
    nameList.innerHTML = sortedNames.map(name => `<li>${name}</li>`).join('');
  }
});

关键注意点 #

1. 复选框状态判断：直接使用checkbox.checked属性判断是否勾选，这是最可靠的方式，比通过ID逐个查找元素高效得多。
2. 分组处理：通过name属性对复选框分组，用querySelectorAll批量获取，避免重复代码。
3. 原始数据保存：提前保存原始名称数组，每次排序都基于原始数据，防止多次排序导致结果异常。
4. DOM加载时机：确保JS代码在DOM加载完成后执行，避免出现获取不到元素的情况。

内容的提问来源于stack exchange，提问作者Alex von B