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

Day10 Hold Shift to Check Multiple Checkboxes

XAMPP下载 文, 员 64浏览 0评论
 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
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

转载请注明:XAMPP中文组官网 » Day10 Hold Shift to Check Multiple Checkboxes