Day10 Hold Shift to Check Multiple Checkboxes

Demo

第10天的實作目標是在列表中，當點選其中一個選項後，再按shift再點選其他選項，可以做到在第一次被點選和按住shift的中間的選項都被選取。

首先取得全部input[type=checkbox]，之後每一個元素建立click事件。

checkboxs.forEach(checkbox =>{
  checkbox.addEventListener('click', clickCheckboxEvent)
})

在click事件中有兩件事要判斷，首先判斷是有按shift鍵，若是有按shift鍵就進入判斷的事件。

若沒有按下shit鍵就將目前按下的checkbox元素記錄下來，作為下一個按下shift鍵的checkbox的起始點。

接下來是當有一個checkbox被按下去，又按下shift鍵的事件，再點選其他checkbox的事件，該事件也同屬於click事件中。

首先要先確定按下shift和目前的checkbox是被點選的狀態。

if (e.shiftKey && this.checked){}

接下來是當shift被按下和checkbox被點選時，查詢每一個checkbox元素，哪些要設定checked=true的狀態。

checkboxs.forEach(checkbox =>{})

上一個checked＝true的checkbox元素跟目前被checked的checkbox元素的區間中，每一個checkbox元素都要轉成checked=true。

設定一個flag初始值為false，該flag的目標就是在兩個被點選的區間為true，區間之外為false。

有兩種情況來轉換flag的值，第一種是按下checkbox，另外一種是上一個被點選checkbox元素。

if (checkbox === this || checkbox === lastCheckbox) { inBetween = !inBetween }

當flag的值為true，就把checkbox的checked轉成true。

if (inBetween) checkbox.checked = true;

這樣即可做到這次實做的目標，運用shift鍵做到多重選取的功能。

Html

<div class="item">
  <input type="checkbox">
  <p>This is an inbox layout.</p>
</div>
    。
    。
    。
<div class="item">
  <input type="checkbox">
  <p>Don't forget to tweet your result!</p>
</div>

Javascript

1. MouseEvent.shiftKey
   指按下shift鍵其回傳值為true，若沒有按下shift鍵其回傳值為false。
   The MouseEvent.shiftKey read-only property indicates if the shift key was pressed (true) or not (false) when the event occurred.

tags: checkbox