「JS30紀錄&心得」10 - Hold Shift and Check Checkboxes

主題

介紹如何使用Shift + 左鍵來完成連續區間選取,
在這篇的探索中,我增加了連續區間取消選取及部分問題的改善。

[DEMO][GitHub][JavaScript30全列表]

步驟

Step1. 基本設定

querySelectorAll('.inbox input[type="checkbox"]來把HTML中的checkbox選起來,
並設置一個變數let lastChecked;作為稍後勾選位置的紀錄使用。

Step2. 觸發設定

把所有選取的checkboxes使用forEach來加入addEventListener('click', handelCheck)

Step3. handelCheck

在這個function裡面,建立了一個區域變數let inBetween = false來當作選取區間的標記,
並在每次觸發時檢查是否”有按著shift點擊”if(e.shiftKey && this.checked)
若有的話則再跑一次forEach來透過inBetween對每個checkbox進行區間標記,
把屬於區間內的checkbox勾起來,並記錄此次點擊的位置。

程式備註

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//選取所有的checkbox
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let lastChecked;
function handleCheck(e) {
let inBetween = false;
// 檢查是否按著shift點選
if (e.shiftKey && this.checked) {
checkboxes.forEach(checkbox => {
// 當前點選的checkbox開始記錄到最後一個點選的checkbox關閉標記
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
console.log('STarting to check them inbetween!');
}
// 勾選區間內為true的checkbox
if (inBetween) {
checkbox.checked = true;
}
});
}
lastChecked = this;
}
// 為每個checkbox加上click事件
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

探索

一開始做完原本作者講述的方法(也就是上面那段)的做法後,
發現有些小問題,例如直接對著同一個checkbox點選會導致全選,
也沒有辦法做區間取消選取的功能,所以重新寫了一個可以區間選取/取消的版本。

分析動作

想一下會使用連續選取時,我自己的動作會有這幾種:

  1. 單選:單純的點一下進行勾選/取消
  2. 範圍選取:按住shift後點到其他checkbox
  3. 範圍取消:在2按住shift的狀態下,點到已勾選的checkbox

所以我依據這些動作分別寫了對應的功能。

程式備註

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// 選取所有checkbox
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
let click; // 單純的點擊
let selectClick; // 按下shift後的選取
let cancelClick; // 按下shift後的取消
const handleCheck = function (e) {
if (e.shiftKey && this.checked) {
selectClick = this;
selectBox();
} else if (e.shiftKey && !this.checked) {
cancelClick = this;
cancleBox();
} else if (this.checked) {
click = this;
selectClick = undefined;
cancelClick = undefined;
} else {
click = undefined;
selectClick = undefined;
cancelClick = undefined;
}
// 選取功能
function selectBox() {
let inBetween = false;
checkboxes.forEach(checkbox => {
// 將選取範圍內的checkbox加上標記
if (checkbox === selectClick || checkbox === click) {
inBetween = !inBetween;
}
// 將有標記的checkbox勾選(且click不為undefined與selectClick是為了避免點自己全選)
if (inBetween && click !== undefined && click !== selectClick) {
checkbox.checked = true;
}
})
}
//取消選取
function cancleBox(el) {
let inBetween = false;
checkboxes.forEach(checkbox => {
// 將選取範圍內的checkbox加上標記
if (checkbox === selectClick || checkbox === cancelClick) {
inBetween = !inBetween;
}
// 將有標記的checkbox勾選(以及selectClick)
if (inBetween || checkbox === selectClick) {
checkbox.checked = false;
}
})
}
}
// 偵測checkbox的click
checkboxes.forEach(checkbox => { checkbox.addEventListener('click', handleCheck) });
// 偵測當shift放開時讓click恢復未選取的狀態
window.addEventListener('keyup', (e) => {
if (e.keyCode === 16 || e.shiftKey) {
click = undefined;
};
})