最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第十堂 – Hold Shift and Check Checkboxes

XAMPP下载 admin 825浏览 0评论
 今天的實作雖然看似簡單,但若要自己獨立完成,並寫得像課程那樣簡潔有力,這其中的邏輯是要花點時間思考的。這堂課所要做的是一個能夠同時勾選多項的清單,若勾選其中一個選項,接著按住shift鍵,再勾選下一個選項,這時上一個選項到這一個選項之間的所有選項都會被打勾,就像Gmail要選擇多封信的操作一樣。實作範例如下:

邏輯流程
取得包含所有input的Array
監聽input的click事件
click即觸發勾選的函式
課程重點
其實這個實作的code非常簡短,如下

QQ截图20181104163903

const checkboxes = document.querySelectorAll(“.inbox input”);
let lastChecked;
let inBetween = false;
checkboxes.forEach(checkbox => checkbox.addEventListener(“click”, handleCheck));

function handleCheck(e) {
if(e.shiftKey && this.checked){
checkboxes.forEach(checkbox => {
if(checkbox === this || checkbox === lastChecked)
inBetween = !inBetween;
if(inBetween)
checkbox.checked = true;
})
}
lastChecked = this;
}
首先取得所有input elements,當input被click時觸發handleCheck函式。無論有沒有按shift鍵來勾選,都會把這個被click的input指定為lastChecked。

而如果是按著shift鍵且是勾選(不是取消勾選)的話,就會把所有input以迴圈的方式查看一遍,一個一個看input是this(這次點選的)還是lastChecked(上次點選的)。所以只會有兩個input能進入這個if,就是這次點的跟上次點的兩個input,也就是當你在多選項目時的起點跟終點。

inBetween是個Flag標記,在遇到this或lastChecked時會變成true,直到遇到下一個lastChecked或this,才會變回false。而這之間所經歷的其他input的inBetween都會維持在true,所以會被勾選。

转载请注明:XAMPP中文组官网 » 第十堂 – Hold Shift and Check Checkboxes

您必须 登录 才能发表评论!