Day10-JS实现Checkbox中按住Shift多选功能作者：?liyuechun简介：JavaScript30是由WesBos发起的30天挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。目标是帮助人们在没有框架和库、没有编译器和引用的情况下用纯JavaScript编写东西。您现在是本系列指南中的第10位。完整的中文版指南和视频教程在ZEROtoONE全栈部落。工程效果操作方法选中A项，按住Shift键，再选中B项，A-B之间的所有项都被选中或取消。实现方法method-WesBos在文档中提供了一个解决方案：用一个变量来标记这个范围。变量的初始值为false。当按下Shift键的同时选中一个元素时，将遍历所有项。遍历过程中，如果遇到A或B，则将tag值取反。此外，将所有标记为true的项目设置为选中。letstartChecked;//处理方法一：用变量inBetween标记要选中的元素functionhandleCheck0(e){letinBetween=false;if(e.shiftKey&&this.checked){boxes.forEach(input=>{console.log(input);if(input===startChecked||input===this){inBetween=!inBetween;}if(inBetween){console.log("on");input.checked=true;}});}startChecked=this;}第二种方法会有问题。首次加载页面时，按住Shift并单击一个项目，将选中该项目之后的元素。另外，对于uncheck，没有批量操作。下面第三种方法是鸡西大豆碱的操作逻辑。方法二是我对WesBos实现方法逻辑的改进。方法二和方法三可以取消，可以批量选择。letstartChecked;letonOff=false;//处理方式二：添加onOff变量，用于存储待改变复选框的状态functionhandleCheck2(e){letinBetween=false;如果（e.shiftKey）{onOff=startChecked.checked？真假;boxes.forEach(input=>{console.log(input);if(input===startChecked||input===this){inBetween=!inBetween;}if(inBetween&&input!==startChecked||input===this){input.checked=onOff;}});开始检查=这个；}startChecked=this;}onOff=startChecked.checked？真假;根据startChecked设置要改变的状态。同时修改了if(inBetween&&input!==startChecked||input===this)代码，加入||输入===这个，否则最后一个的状态会和其他checkboxes的状态不一致bug。方法三和方法一中的inBetween只是表示item是否在选中的范围内，这里会赋予更多的含义，用它来表示item是选中还是未选中，范围由数组solve决定。先将得到的组转成数组，每操作一次，得到A和B，通过indexOf()得到A和B在数组中的索引值，这样就可以确定范围了，而slice可以通过()直接拦截A-B的所有DOM元素，进行状态改变操作，变量onOff表示A-B范围内的状态，true表示选中，false表示未选中。constboxArr=Array.from(boxs);letstartChecked;letonOff=false;//处理方式二：使用数组索引获取选择范围functionhandleCheck1(e){if(!startChecked)startChecked=this;onOff=startChecked.checked?真假;如果（e.shiftKey）{让开始=boxArr.indexOf（这个）;letend=boxArr.indexOf(startChecked);boxArr.slice(Math.min(start,end),Math.max(start,end)+1).forEach(input=>input.checked=onOff);控制台日志（开始+“+”+结束）；}startChecked=this;}ConvertNodelisttoarrayconstboxes=document.querySelectorAll('.inboxinput[type="checkbox"]');constboxArr=Array.from(boxs);根据Shift键为的情况按下，获取A-B范围letstart=boxArr.indexOf(this);letend=boxArr.indexOf(startChecked);截取范围内的数组元素，改变选中状态boxArr.slice(Math.min(start,end),Math.max(start,end)+1).forEach(input=>input.checked=onOff);确定选中或取消选中onOff=startChecked.checked？真假;标记一个值if(!startChecked)startChecked=this;/*...*/startChecked=this;源码下载Github源码社区品牌：从零到一全栈部落定位：寻找共同兴趣，共同学习，持续输出全栈技术社区行业荣誉：IT世界逻辑思维文化：输出是最好的方式学习官方公众号：全栈部落社区发起人：春哥（创始人从零到一，交流微信：liyc1215）技术交流社区：全栈部落BBS全栈部落全系列教程：完整e-全栈部落读书笔记关注全栈部落官方公众号，每晚10点领取系列原创技术推送
