Day10 Multiple Checkboxes

發表於 | 分類於 | 閱讀次數:
| 663

Demo

這次主題要挑戰的是多選功能！
我覺得最大的考驗不是js而是邏輯

對象與事件觸發

1
2
3
4
const checkboxes = document.querySelectorAll('.item input[type="checkbox"]')
const checkboxArray = Array.from(checkboxes)

checkboxArray.forEach(checkbox=>{checkbox.addEventListener('click',Handler)})

一樣我們把對象選起來，放到陣列中，方便我們之後做選取並取得序列。
透過forEach()去針對每input做偵聽，按下按鈕時執行Handler涵式。

現在/下一個是誰?

這裡有兩種情境可能會發生：

  1. 一開始任何選項都還沒勾選，使用者就想直接shift多選了。所以開始位置為0。
  2. 使用者已經勾選了第3個(舉例)，接下來他想繼續多選，他有兩個方向：一是選取從第3個開始往下到第N個；二是選取第3個開始往上到第N個。

所以我們必須知道起點與終點這兩個值，而這兩個值會不斷地在選取後做變化。

  • startSelect預設是0
  • endSelect我點到之後才知道是第幾個。
1
2
3
4
5
6
7
8
9
10
11
let startSelect = 0
function Handler(e){
  var target = e.target
  var endSelect = checkboxArray.indexOf(target)
  ..
  ...
  ....
  console.log('第1個按的:'+startSelect)
  console.log('第2個按的:'+endSelect)
  startSelect = endSelect
}

最後將endSelect做為第二次執行(勾選)的起點
舉例:
round1: 起點0 / 選取2
round2: 起點2 / 選取6
round3: 起點6 / 選取9
可透過console.log檢查是否正確。

執行

這部分也可另外拉出來做一個函式會比較好。

1
2
3
4
5
6
7
8
9
10
11
if(e.shiftKey){
  if(endSelect>startSelect){
    for(i=startSelect;i<=endSelect;i++){
      checkboxArray[i].checked = true
    }
  }else{
    for(i=endSelect;i<=startSelect;i++){//(i=startSelect;i>=endSelect;i--)
      checkboxArray[i].checked = true
    }
  }
}

人類的語言

1
2
3
4
5
6
7
8
9
10
11
12
如果（有按shift）｛
  如果（終點位置在起點位置下面）｛
      就從（起點開始到終點）｛
          每一個checkbox的checked都變成true
      ｝
  ｝
  如果相反｛
      就從（終點開始到起點）｛
          每一個checkbox的checked都變成true
      ｝
  ｝
｝

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const checkboxes = document.querySelectorAll('.item input[type="checkbox"]')
const checkboxArray = Array.from(checkboxes)
let startSelect = 0

function Handler(e){
  var target = e.target//我點的這個
  var endSelect = checkboxArray.indexOf(target)

  if(e.shiftKey){//如果我有按shift
    if(endSelect>startSelect){
      for(i=startSelect;i<=endSelect;i++){
        checkboxArray[i].checked = true
      }
    }else{
      for(i=endSelect;i<=startSelect;i++){//(i=startSelect;i>=endSelect;i--)
        checkboxArray[i].checked = true
      }
    }
  }
  startSelect = endSelect
}
checkboxArray.forEach(checkbox=>{checkbox.addEventListener('click',Handler)})

不負責任聲明ಥ◡ಥ：
純屬個人筆記，每個範例都有不同的寫法，還有很多細節可以加入，有任何問題都歡迎提出一起研究哦，我會很感謝您的！- 2018.08.14

0%