操作方法

1.選中 A 項(xiàng)
2.按下 Shift
3.再選中 B 項(xiàng)
4.A-B 之間的所有項(xiàng)都被選中或者取消

實(shí)現(xiàn)方法

首先將獲取到的<input>組轉(zhuǎn)化為數(shù)組，針對每次操作，獲取A 和 B，利用 indexOf()來獲得 A 和 B 在數(shù)組中的索引值，由此即可確定范圍，并能通過 slice()來直接截取A-B的所有DOM元素，并進(jìn)行狀態(tài)改變的操作，而變量 onOff 表示 A-B范圍內(nèi)的狀態(tài)，true 表示選中，false 表示取消選中。

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

// 處理方法二：利用數(shù)組索引獲取需要選中的范圍
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. 轉(zhuǎn)換 Nodelist 為數(shù)組

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.截取該范圍內(nèi)的數(shù)組元素，并改變選中狀態(tài)

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

4.確定選中 or 取消選中

onOff = startChecked.checked ? true : false;

5.標(biāo)記 A 值

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