1、HTML部分

<div class="inbox"><div class="item"><input type="checkbox"><p>This is an inbox layout.</p></div><div class="item"><input type="checkbox"><p>Check one item</p></div><div class="item"><input type="checkbox"><p>Hold down your Shift key</p></div><div class="item"><input type="checkbox"><p>Check a lower item</p></div><div class="item"><input type="checkbox"><p>Everything in between should also be set to checked</p></div><div class="item"><input type="checkbox"><p>Try to do it without any libraries</p></div><div class="item"><input type="checkbox"><p>Just regular JavaScript</p></div><div class="item"><input type="checkbox"><p>Good Luck!</p></div><div class="item"><input type="checkbox"><p>Don't forget to tweet your result!</p></div>
</div>

2、CSS部分

<style>html {font-family: sans-serif;background: #ffc600;}.inbox {max-width: 400px;margin: 50px auto;background: white;border-radius: 5px;box-shadow: 10px 10px 0 rgba(0,0,0,0.1);}.item {display: flex;align-items: center;border-bottom: 1px solid #F1F1F1;}.item:last-child {border-bottom: 0;}/*：check伪类选择器代表任何选中或者切换到on状态的单选（如<input type="radio">、checkbox或者option元素）*/input:checked + p {background: #F9F9F9;text-decoration: line-through;}{margin: 20px;}p {margin: 0;padding: 20px;transition: background 0.2s;flex: 1;font-family:'helvetica neue';font-size: 20px;font-weight: 200;border-left: 1px solid #D1E2FF;}
</style>

3、JavaScript部分

3.1 先获取所有input的值

const checkboxs = document.querySelectorAll('.inbox input[type = checkbox]');

这里有需要注意的
因为querySelectorAll得到的不是规范的阵列，所以我们需要在外面加一个Array.from()来规范它

const checkboxs =Array.from(document.querySelectorAll('.inbox input[type = checkbox]'));

3.2 由于是多个input，所以要做遍历循环，并对点击事件进行监听

checkboxs.forEach((item)=>{item.addEventListener("click",clickHandler)
})function clickHandler(e){console.log(e);
}

因为需要用shiftkey（shift按钮）来实现，所以我们在控制台找到shiftKey是一个布尔值。如果按住shift键同时点击选项，那么shiftKey为true，否则为false。

3.3 由于要做多选，所以要这样

3.3.1 第一步：设置一个变量来定义第一个选中的东西（firstCheck）

let firstCheck = null;

3.3.2 第二步：判断元素是否被选中

if(this.checked){firstCheck = checkboxs.indexof(this);
}else{firstCheck = null;
}

3.3.3 第三步：两个条件

①首先要确定shift键是打开的

②其次你有一个选中的值，lastCheck就是用来判断的。

let firstCheck;
if(this.checked){lastCheck = checkboxs.indexof(this);checkboxes.slice(Math.min(nowCheck,firstCheck),Math.max(nowCheck,firstCheck)).forEach(input=>(inpput.checked = true))firstCheck = checkboxes.indexof(this);}else{lastCheck = null;
}

:::知识点
这里要注意，因为firstCheck是一个数值的判断，而电脑是会将数字转化为true或者false来执行，所以如果选择列表第一个（数值为0），那么电脑就会把0转化为false，所以当选择列表第一个数字的时候，按住shift键要多选是执行不了的。在以后如果变量的类型是数值的，那么不能直接扔进if语句进行判断，一定要把它的判断条件写完整。

slice中由于不知道选中的顺序是什么（可能从前面选，也可能从后面选，所以要用Math来进行对比）

slice是一个选择区间的函数
:::

JavaScript实现shift键连续多选相关推荐

shift键的十一个妙用
一.当你用QQ和别人聊天时,是不是有时信息发送的特别慢呀,不要紧,只要你发信息时按shift 键信息就会很快的发送出去的! 二.当你面对一大堆窗口,却要一个一个把它们关掉时.是不是很烦啊.只要你按sh ...
计算机按键 shift的作用,电脑shift键的十一个妙用
现代社会电脑代替了以前的笔记,不管是什么都可以在电脑上搜索出来或者做出来,但是很多人用电脑,却不知道键盘上的快捷键用途,今天和脚本之家小编一起来看一下电脑shift键的十一个妙用吧. 电脑shift键 ...
计算机键盘上范的怎么点击,键盘shift键怎么使用
很多人都不知道键盘上shift 键的作用和操作方法.那么键盘shift键怎么使用呢?就让范文啊小编来告诉大家键盘shift键的使用方法吧,希望可以帮助到大家. 键盘shift键使用方法 shift,上 ...
Day10 -- JavaScript实现按下 Shift 键后进行多选操作的功能
实现效果需求分析通过shift键实现连续多选功能按下shift的同时点击A复选框,然后在点击B复选框,A,B之间的复选框都被勾选上或者是先点击A复选框,再按下shift键点击B复选框,A,B之 ...
shift用计算机,电脑Shift键的妙用，你都了解吗？
原标题:电脑Shift键的妙用,你都了解吗? 1.取消"启动"的功能在开机进入Windows时,一直按住Shift键直到开机结束,那么启动项中的功能将失效.例如,你在开机时不想让 ...
c语言中shift的作用,Shift是什么意思？Shift键的功能及作用有哪些？
电脑键盘上英文字母是按常用字母的使用率来进行排位的,把26个英文字母最常用的字母放到中间由最灵活的手指来按,但键盘除了字母键还有一些特殊键,例如:space空格键.Esc取消键,PageUP翻页键等, ...
shift键计算机功能,分享新手必会的快捷键：shift键的11个妙用！
原标题:分享新手必会的快捷键:shift键的11个妙用! 今天要和大家一起聊一下我们电脑键盘上那些关于shift键的事儿.提起电脑键盘上的shift键呐我相信大家一定很熟悉,因为在平常使用电脑的时候 ...
电脑快捷键：关于shift键的11个实用技巧
今天要和大家一起聊一下我们电脑键盘上那些关于shift键的事儿.提起电脑键盘上的shift键大家一定很熟悉,因为在平常使用电脑的时候呢会经常的用到它. 可是大家知道吗?shift按键除了我们平常使用的 ...
计算机选取多个目标按什么键,连续选择多个按什么键
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 连续选择多个按键的方法如下: 1.如果是多个文件,而只需要选择其中几个,可以按住CTRL键不放手,然后在需要的文件名上点击鼠标左键 ...

JavaScript实现shift键连续多选