操作方法
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;
}
- 转换 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;
