JS 实现 Checkbox 中按住 Shift 的多选功能

操作方法

1.选中 A 项
2.按下 Shift
3.再选中 B 项
4.A-B 之间的所有项都被选中或者取消

实现方法

首先将获取到的<input>组转化为数组，针对每次操作，获取A 和 B，利用 indexOf()来获得 A 和 B 在数组中的索引值，由此即可确定范围，并能通过 slice()来直接截取A-B的所有DOM元素，并进行状态改变的操作，而变量 onOff 表示 A-B范围内的状态，true 表示选中，false 表示取消选中。

const boxArr = Array.from(boxs);
let startChecked;
let onOff = false;

// 处理方法二：利用数组索引获取需要选中的范围
function handleCheck1(e) {
    if(!startChecked) startChecked = this;
    onOff = startChecked.checked ? true : false;
    if(e.shiftKey) {
        let start = boxArr.indexOf(this);
        let end = boxArr.indexOf(startChecked);
        boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                   .forEach(input => input.checked = onOff);
        console.log(start + "+" + end);
    }
    startChecked = this;
}

1. 转换 Nodelist 为数组

const boxs = document.querySelectorAll('.inbox input[type="checkbox"]');
const boxArr = Array.from(boxs);

2.针对按下了 Shift 键的情况，获取 A-B 范围

let start = boxArr.indexOf(this);
let end = boxArr.indexOf(startChecked);

3.截取该范围内的数组元素，并改变选中状态

boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                   .forEach(input => input.checked = onOff);

4.确定选中 or 取消选中

onOff = startChecked.checked ? true : false;

5.标记 A 值

if(!startChecked) startChecked = this;
/* ... */
startChecked = this;