如何按住Shift键批量选中指定排序的多行checkbox？

当然可以实现这种类似文本选择的Shift批量勾选功能！核心思路是通过监听键盘状态和Checkbox的点击事件，记录起始选中项，然后自动处理同一行内的中间Checkbox状态。下面是具体的实现步骤和代码示例：

1. 先给Checkbox结构分组 #

首先给两行Checkbox分别放在容器里，方便我们区分行内的元素，避免跨行误选：

<div class="checkbox-row upper-row">
  <input type="checkbox" id="ck18"> <label for="ck18">ck18</label>
  <input type="checkbox" id="ck17"> <label for="ck17">ck17</label>
  <input type="checkbox" id="ck16"> <label for="ck16">ck16</label>
  <input type="checkbox" id="ck15"> <label for="ck15">ck15</label>
  <input type="checkbox" id="ck14"> <label for="ck14">ck14</label>
  <input type="checkbox" id="ck13"> <label for="ck13">ck13</label>
  <input type="checkbox" id="ck12"> <label for="ck12">ck12</label>
  <input type="checkbox" id="ck11"> <label for="ck11">ck11</label>
  <input type="checkbox" id="ck21"> <label for="ck21">ck21</label>
  <input type="checkbox" id="ck22"> <label for="ck22">ck22</label>
  <input type="checkbox" id="ck23"> <label for="ck23">ck23</label>
  <input type="checkbox" id="ck24"> <label for="ck24">ck24</label>
  <input type="checkbox" id="ck25"> <label for="ck25">ck25</label>
  <input type="checkbox" id="ck26"> <label for="ck26">ck26</label>
  <input type="checkbox" id="ck27"> <label for="ck27">ck27</label>
  <input type="checkbox" id="ck28"> <label for="ck28">ck28</label>
</div>

<div class="checkbox-row lower-row">
  <input type="checkbox" id="ck38"> <label for="ck38">ck38</label>
  <input type="checkbox" id="ck37"> <label for="ck37">ck37</label>
  <input type="checkbox" id="ck36"> <label for="ck36">ck36</label>
  <input type="checkbox" id="ck35"> <label for="ck35">ck35</label>
  <input type="checkbox" id="ck34"> <label for="ck34">ck34</label>
  <input type="checkbox" id="ck33"> <label for="ck33">ck33</label>
  <input type="checkbox" id="ck32"> <label for="ck32">ck32</label>
  <input type="checkbox" id="ck31"> <label for="ck31">ck31</label>
  <input type="checkbox" id="ck41"> <label for="ck41">ck41</label>
  <input type="checkbox" id="ck42"> <label for="ck42">ck42</label>
  <input type="checkbox" id="ck43"> <label for="ck43">ck43</label>
  <input type="checkbox" id="ck44"> <label for="ck44">ck44</label>
  <input type="checkbox" id="ck45"> <label for="ck45">ck45</label>
  <input type="checkbox" id="ck46"> <label for="ck46">ck46</label>
  <input type="checkbox" id="ck47"> <label for="ck47">ck47</label>
  <input type="checkbox" id="ck48"> <label for="ck48">ck48</label>
</div>

2. 编写JavaScript实现核心逻辑 #

我们需要监听Shift键的状态，以及每个Checkbox的点击事件，来完成批量勾选：

// 全局状态记录
let lastChecked = null;
let isShiftPressed = false;

// 监听键盘Shift键状态
document.addEventListener('keydown', (e) => {
  if (e.key === 'Shift') {
    isShiftPressed = true;
  }
});

document.addEventListener('keyup', (e) => {
  if (e.key === 'Shift') {
    isShiftPressed = false;
    lastChecked = null; // 释放Shift后重置起始项
  }
});

// 给所有Checkbox绑定点击事件
document.querySelectorAll('.checkbox-row input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('click', (e) => {
    // 如果Shift没按住，或者是第一次点击，只记录当前项
    if (!isShiftPressed || !lastChecked) {
      lastChecked = e.target;
      return;
    }

    // 确保当前点击的Checkbox和lastChecked在同一行
    const currentRow = e.target.closest('.checkbox-row');
    const lastRow = lastChecked.closest('.checkbox-row');
    if (currentRow !== lastRow) {
      lastChecked = e.target;
      return;
    }

    // 获取当前行的所有Checkbox列表
    const allCheckboxesInRow = Array.from(currentRow.querySelectorAll('input[type="checkbox"]'));
    // 找到两个Checkbox的索引位置
    const currentIndex = allCheckboxesInRow.indexOf(e.target);
    const lastIndex = allCheckboxesInRow.indexOf(lastChecked);

    // 确定起始和结束索引（处理正序和倒序选择）
    const start = Math.min(currentIndex, lastIndex);
    const end = Math.max(currentIndex, lastIndex);

    // 批量设置中间Checkbox的状态
    allCheckboxesInRow.slice(start, end + 1).forEach(ck => {
      ck.checked = e.target.checked;
    });

    // 更新lastChecked为当前项
    lastChecked = e.target;
  });
});

关键逻辑说明 #

• 行内限制：通过closest('.checkbox-row')确保只在同一行内进行范围选择，不会跨行选中其他行的Checkbox。
• 双向选择：不管是从左到右还是从右到左点击，都能通过Math.min和Math.max确定正确的范围。
• 状态同步：批量勾选时会同步当前点击项的状态（勾选/取消），和文本选择的逻辑一致。

使用的时候，你只需要按住Shift键，先点击范围的第一个Checkbox，再点击最后一个，中间的所有Checkbox就会自动同步状态啦！

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