JsGrid表格中Shift多选复选框：多范围选择的实现问题

先理清楚你的核心需求：你已经实现了单个范围的复选框批量选择，现在要扩展到多范围选择，但尝试获取当前点击行上方最近的已选中复选框所在行索引时，之前的代码一直返回-1，无法正常工作。

问题根源分析 #

你之前的prevUntil写法存在两个关键错误：

1. 选择器参数顺序错误：prevUntil的第一个参数是终止遍历的选择器，第二个是过滤结果的选择器，你把:checked放在第二个位置完全不符合语法逻辑；
2. 遍历对象错误：你直接在复选框元素上调用prevUntil，遍历的是同级的<td>元素，而不是我们需要的<tr>行元素，自然找不到目标行。

结合你给出的HTML结构，每一行的复选框都在第二个<td>中，我们需要从当前行向上遍历所有同行级的<tr>，找到第一个包含已选中复选框的行。

修复后的解决方案 #

替换你获取first索引的代码，使用下面的逻辑来实现多范围选择：

完整可运行代码 #

$(document).on('click', '[type=checkbox]', function(e) {
    if (e.shiftKey) {
        const currentCheckbox = $(this);
        // 获取当前点击复选框所在的行，用closest比parent().parent()更健壮
        const currentRow = currentCheckbox.closest('tr');
        const currentIndex = currentRow.index();
        
        // 向上查找最近的、包含已选中复选框的行
        const lastCheckedRow = currentRow.prevAll('tr')
            .has('input[type="checkbox"]:checked')
            .first();
        
        if (lastCheckedRow.length) {
            const firstIndex = lastCheckedRow.index();
            // 处理反向选择的情况（比如先选第3行，再shift选第1行）
            const start = Math.min(firstIndex, currentIndex);
            const end = Math.max(firstIndex, currentIndex);
            
            // 批量选中范围内的所有复选框
            $("#jsGrid tbody tr")
                .slice(start, end + 1)
                .find('input[type="checkbox"]')
                .prop('checked', true);
        }
    }
});

代码关键细节解释 #

1. closest('tr')：相比parent().parent()，这个方法能自适应HTML结构的微调，只要复选框在行内，就能准确找到所在行；
2. prevAll('tr').has('input[type="checkbox"]:checked').first()：
   • prevAll('tr')：获取当前行之前的所有同级行；
   • has(...)：过滤出包含已选中复选框的行；
   • first()：取距离当前行最近的那一行；
3. Math.min/Math.max：处理用户从下往上反向选择的场景，保证范围的起始和结束索引始终正确；
4. slice(start, end + 1)：因为jQuery的slice是左闭右开的取值逻辑，所以要+1才能包含结束索引对应的行。

这样修改后，就能正确识别多范围选择的起始行，实现你需要的多范围复选框批量选中功能了。

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