# [JS30] Day.10 Hold Shift to Check Multiple Checkboxes
###### tags: `JS30`
## 任務 Task
將現有的 `TodoList` 加入 `shift` 按鍵功能，可一次 `check` 多個項目。

==完成時間：0.5hr==
## 步驟 Step
1. 監聽 `click` 事件，建立 `handleCheck` 函式。
2. 先設一個變數 `inBetween` 為 `false` 來確認是否為兩個 `checked` 之間的 `checkbox`。
3. 如果按下 `shift` 鍵，`forEach` 每個 `checkbox` 確認是否為上一個 `checkbox` 或按下 `shift` 後按下的 `checkbox`。
4. 如果是則將 `handleCheck` 變成 `!handleCheck`。
5. 當 `handleCheck` 為 `true` 則 `checkbox.checked = ture`
## 筆記 Note
### <font color=#337EA9>Code</font>
### <font color=#337EA9>邏輯</font>
* 這次沒有新的用法，比較注重在邏輯的部分。重點在於，用 `forEach` 跑過每個 `checkbox`，當遇到第一個 `checked` 的 `checkbox` 時，將 `isBetween` 變成 `!isBetween` 這樣後面的 `checkbox` 的 `isBetween` 就會變成 `true`。
* 當遇到第二個 `checked` 時，也將 `isBetween` 變成 `!isBetween` ，這樣後面的 `checkbox` 就會變成 `false`。
* 之所以不將 `isBetween` 變成 `true` 是因為當遇到第二個 `checked` 時，後面不能是 `true` 所以才會用 `!isBetween` 的方法。
### <font color=#337EA9>注意細節</font>
==`lastChecked`==
* 在一開始要先設變數 `lastChecked` 當第一個 `checked` 時 `lastChecked = this` 先存第一個 `checked` 的 `checkbox`。
* `lastChecked = this` 放的位置要在按下 `shift` 後面，如果放前面，則第二次 `checked` 時，`lastChecked` 會被第二次蓋過去。
* 也因為放在後面，所以要先在外面定義 `let lastChecked`。

==`e.shiftKey`==
* 監聽 `click event` 而不使用 `input event`，因為只有 `touch event` 及 `keyboard event`才能使用 `shiftKey` 的 `property`。