jQuery复选框Shift点击功能失效：为何无法批量选中全部复选框？

嘿，这个问题我太熟啦！你现在的代码只有纯HTML复选框结构，而原生HTML复选框本身并没有内置Shift键批量选中的交互逻辑，这个便捷的批量操作是需要通过JavaScript手动实现的，所以你当前的代码自然没法实现按住Shift选中多个复选框的效果。

解决方案思路 #

我们可以通过简单的JS逻辑来补上这个功能，核心思路很清晰：

• 记录用户上一次选中的复选框的位置索引
• 当用户按住Shift键点击某个复选框时，找出两次点击的复选框之间的所有项，将它们的选中状态同步为当前点击项的状态

完整可运行代码示例 #

<ul>
  <li><input type="checkbox" class="grid-item">One</li>
  <li><input type="checkbox" class="grid-item">Two</li>
  <li><input type="checkbox" class="grid-item">Three</li>
</ul>

<script>
// 存储上一次选中的复选框索引，初始为null
let lastCheckedIndex = null;
// 获取所有class为grid-item的复选框
const checkboxes = document.querySelectorAll('.grid-item');

checkboxes.forEach((checkbox, index) => {
  checkbox.addEventListener('click', (e) => {
    // 满足Shift键按下、当前复选框被选中、且有上一次选中记录时，执行批量操作
    if (e.shiftKey && checkbox.checked && lastCheckedIndex !== null) {
      // 处理正向/反向选中的情况，确定起始和结束索引
      const startIndex = Math.min(lastCheckedIndex, index);
      const endIndex = Math.max(lastCheckedIndex, index);
      
      // 遍历范围内的所有复选框，设置选中状态
      for (let i = startIndex; i <= endIndex; i++) {
        checkboxes[i].checked = true;
      }
    }
    
    // 更新上一次选中的索引：只有当前复选框被选中时才记录，取消选中则重置
    lastCheckedIndex = checkbox.checked ? index : null;
  });
});
</script>

代码关键点说明 #

• lastCheckedIndex：用来追踪用户最后一次主动选中的复选框位置，确保批量操作能找到正确的范围
• Shift点击判断：只有同时满足Shift键按下、当前复选框处于选中状态、且有历史选中记录这三个条件，才触发批量选中
• 范围处理：用Math.min和Math.max确保不管是从前往后选还是从后往前选，都能正确覆盖中间的所有复选框

这样修改后，你点击第一个复选框，按住Shift点击第三个，就能轻松选中全部三个复选框啦~

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