[Day10] Hold Shift to Check Multiple Checkboxes

[Day10] Hold Shift to Check Multiple Checkboxes

checkbox 的连续勾选运用

需要用到的技巧与练习目标

1. mouseEvent.shiftKey / checked
2. 运用变数设置开关的运用

制作步骤与流程

1. 绑定所有的 checkbox 设定监听
2. 判断有 按shift和 已勾选过的 checkbox 执行 checkHandler函式
3. 建立一个 lastCheck 来记录最後勾选的DOM元素 (要是执行此函式 则 lastCheck 则绑定 this (点击的该元素))
4. 获取 点击元素(this) 及 最後的点及元素 (lastCheck)後，在建立一个 isBetween 的变数为 false 可以判断是否为两个元素中间的checkbox
5. 运用 forEach 的方式来叠代 如果是开始 就把 isBetween 的变数更改为 true 若遇到 lastCheck 则将 isBetween 的变数更改为false ( 运用 isBetween 变数来设一个开关)
6. 如果 isBetween 变数为 true 则将 checkbox 的 checked 改为true

参考文章来源:
https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/shiftKey
https://www.w3schools.com/jsref/prop_checkbox_checked.asp

https://pjchender.dev/js30/js30-day10/