Day10JavaScript实现按下Shift键后进行多选操作的功能

实现效果

需求分析

• 通过shift键实现连续多选功能
  • 按下shift的同时点击A复选框&＃xff0c;然后在点击B复选框&＃xff0c;A,B之间的复选框都被勾选上
  • 或者是先点击A复选框&＃xff0c;再按下shift键点击B复选框&＃xff0c;A,B之间的复选框都被勾选上

代码实现

方法一

• 要实现这个关键在于需要知道A和B之间有多少个选项

  • 使用一个变量isBetween来标记有多少个选项&＃xff0c;刚开始isBetween&＃61;false

  • 当遇到A和B的时候就对isBetween进行取反

  • 遇到A的时候&＃xff0c;isBetween取反等于true

  • 遇到B后&＃xff0c;isBetween取反就变成了false

  • 在遇到B之前&＃xff0c;通过forEach遍历&＃xff0c;遇到了AB之间的元素&＃xff0c;由于他们都没有被选中&＃xff0c;所以不能进入第一个循环&＃xff0c;也就不能改变isBetween的值&＃xff0c;

  • 所以在遇到B之前&＃xff0c;遍历了n个元素&＃xff0c;就有n-1个isBetween为true

  • isBetween为true&＃xff0c;让item.checked &＃61; true;就能实现选择AB之间的元素了

let lastChecked &＃61; null;
function handleCheck(e){let isBetween &＃61; false;// 定义变量checkedNum&＃xff0c;解决没有任何项被勾选的情况下&＃xff0c;按住 Shift 再点击某一项&＃xff0c;此项之后的元素都会被选中的问题// 使用checkedNum来记录被勾选上的项// 此时被勾选上的项都是人为点击的// 变量checkedNum是为了解决按下&＃96;shift&＃96;的同时点击A复选框&＃xff0c;然后在点击B复选框这种情况下// 还没点击B&＃xff0c;剩下的复选框就全被勾选了let checkedNum &＃61; 0;checkboxes.forEach(item &＃61;> {if (item.checked) {checkedNum&＃43;&＃43;;}});if (e.shiftKey && this.checked && checkedNum > 1) {checkboxes.forEach(item &＃61;> {if (item &＃61;&＃61;&＃61; this || item &＃61;&＃61;&＃61; lastChecked) {isBetween &＃61; !isBetween;}if (isBetween) {item.checked &＃61; true;}})}// 使用lastChecked把第一次点击的input存起来&＃xff0c;// 如果首次没有在按下shift键的同时点击input&＃xff0c;那么就不会进入到if循环里// 第二次按下shift再点击的时候才进入if循环&＃xff0c;这个时候如果不存好第一次点击的this// 就不能判断需要勾选的区间lastChecked &＃61; this;
}


方法二

利用数组索引获取需要选中的范围

let onOff &＃61; false;
let lastChecked &＃61; null;
// 处理方法二&＃xff1a;利用数组索引获取需要选中的范围
function handleCheck1(e) {if(!lastChecked) lastChecked &＃61; this;onOff &＃61; lastChecked.checked ? true : false;if(e.shiftKey) {let start &＃61; boxArr.indexOf(this);let end &＃61; boxArr.indexOf(lastChecked);boxArr.slice(Math.min(start, end), Math.max(start, end) &＃43; 1).forEach(input &＃61;> input.checked &＃61; onOff);}lastChecked &＃61; this;
}boxs.forEach(box &＃61;> box.addEventListener(&＃39;click&＃39;, handleCheck1));