第十天來到，相信大家在使用信箱時，都有使用過如果要刪除多封郵件，都會先點擊一封，再按著shift點擊另一封，兩封郵件之間的所有郵件都會變成被選取的功能吧，這次就來做這樣的選取效果！

Day10

Demo
首先看看html部分，先做出9個input值，配上文字

<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 inbetween should also be set to checked</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Try 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>

css部分比較值得注意的是當input被選取時，把p元素加上text-decoration: line-through屬性

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;
}
input:checked + p {
  background: #F9F9F9;
  text-decoration: line-through;
}
input[type="checkbox"] {
  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;
}

js的部分，主要邏輯為監聽每一個input的點擊事件，以及設一些變數去記錄及判斷有哪幾個input是在點擊的兩個input之間

    //選取所有input type為checkbox的元素
    const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
    //宣告一個名為lastChecked的變數
    let lastChecked;
    function handleCheck(e) {
      //宣告inBetween為false
      // Check if they had the shift key down
      // AND check that they are checking it
      let inBetween = false;
      console.log(this)
      //判斷e.shiftKey是否為true，也就是是否有按下shift鍵，以及input是否為check狀態
      //這邊的this為點擊當下的input
      if (e.shiftKey && this.checked) {
        // go ahead and do what we please
        // loop over every single checkbox
        //checkboxes去跑forEach迴圈時
        //如果判斷到是第一個或最後一個點擊的input就改變inBetween的值
        checkboxes.forEach(checkbox => {
          if (checkbox === this || checkbox === lastChecked) {
            inBetween = !inBetween;
          }
          //當inBetween的值為true時，將input的checked改為true
          if (inBetween) {
            checkbox.checked = true;
          }
        });
      }
      //這邊的this為當下點擊的input
      lastChecked = this;
    }
    //將每一個input監聽點擊事件
    checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));