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

实现效果

需求分析

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

代码实现

方法一

要实现这个关键在于需要知道A和B之间有多少个选项
- 使用一个变量isBetween来标记有多少个选项，刚开始isBetween=false
- 当遇到A和B的时候就对isBetween进行取反
- 遇到A的时候，isBetween取反等于true
- 遇到B后，isBetween取反就变成了false
- 在遇到B之前，通过forEach遍历，遇到了AB之间的元素，由于他们都没有被选中，所以不能进入第一个循环，也就不能改变isBetween的值，
- 所以在遇到B之前，遍历了n个元素，就有n-1个isBetween为true
- isBetween为true，让item.checked = true;就能实现选择AB之间的元素了

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

方法二

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

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

Day10 -- JavaScript实现按下 Shift 键后进行多选操作的功能相关推荐

【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件
背景:基于Angular 6,引入ngx-ueditor 发现现象:如果以Shift键+任意键结尾,则ngModel会丢失包含shift键的字符例如:输入"ABC+AB++++" ...
黑客攻击最短代码大揭秘！不要问，问就是5下shift键
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者丨Caesar 来源丨手机电脑双黑客(heike ...
vue el-checkbox按下shift键实现批量选择数据
目录 1.先看下效果 2.代码分析 1.添加html代码,先将列表写出来 2.初始化数据:给原数据添加index属性 3.设置一个flag记录是否按下了shift键,通过监听键盘按下和松开给flag赋 ...
0x8000 GetKeyState(VK_SHIFT); 判断是否有按下shift键
0x8000 & GetKeyState(VK_SHIFT); 这句是判断是否有按下shift键为什么GetAsyncKeyState()& 首先说明,有好多程序或书上是0x8000 ...
int 9中断例程-;在屏幕中间依次显示'a'~'z'，并可以让人看清。在显示的过程中，按下Esc键后，改变显示的颜色...
;在屏幕中间依次显示'a'~'z',并可以让人看清. ;在显示的过程中,按下Esc键后,改变显示的颜色 assume cs:code stack segment db 128 dup(0) stack ...
textbox控件输入内容后按下Enter键后执行button1的click方法
对于Asp.Net.在TextBox1中输入内容后,按下enter键后,执行Button1的click方法,在page_load事件增加如下代码即可实现: TextBox1.Attributes.Ad ...
windows8怎么关机_按下电源键后发生了什么？电脑是如何关机的？
在Windows启动后,最自然的关机方式是什么呢?当然是按下电源键了.有没有好奇,当我们按下电源键,会发生什么呢?为什么Windows可以选择关机或者睡眠?背后的机理又是什么呢? 历史如果你曾经使用 ...
键盘按下某键停止运行java_Java：按下“Q”键后终止while循环
我有下面这个java程序,它在没有while循环的情况下工作正常,但我想运行执行,直到用户从键盘按下Q键.Java:按下"Q"键后终止while循环那么,什么样的条件应该放在wh ...
按下 Home 键后发生了什么事？
后台有位小伙伴分享了一个头条的面试题:按下手机的 Home 键,有哪些动作和事件发生? 今天我们就来分析一下,本文源码基于 Android - 28 事件的分类安卓系统中的事件,主要有以下几种: 按 ...

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

实现效果

需求分析

代码实现

方法一

方法二

Day10 -- JavaScript实现按下 Shift 键后进行多选操作的功能相关推荐

最新文章

热门文章