File tree Expand file tree Collapse file tree 2 files changed +25
-16
lines changed
10 - Hold Shift and Check Checkboxes Expand file tree Collapse file tree 2 files changed +25
-16
lines changed Original file line number Diff line number Diff line change @@ -70,31 +70,40 @@ function handleCheck0(e) {
7070
7171首先将获取到的 ` <input> ` 组转化为数组,针对每次操作,获取 A 和 B,利用 ` indexOf() ` 来获得 A 和 B 在数组中的索引值,由此即可确定范围,并能通过 ` slice() ` 来直接截取 A-B 的所有 DOM 元素,并进行状态改变的操作,而变量 ` onOff ` 表示 A-B 范围内的状态,` true ` 表示选中,` false ` 表示取消选中。
7272
73- 1 . 转换 Nodelist 为数组
74- ```js
73+ 1 . 转换 Nodelist 为数组
74+
75+ ````js
7576 const boxs = document.querySelectorAll('.inbox input[type="checkbox"]');
7677 const boxArr = Array.from(boxs);
77- ```
78- 2 . 针对按下了 Shift 键的情况,获取 A-B 范围
79- ```js
78+ ````
79+
80+ 2 . 针对按下了 Shift 键的情况,获取 A-B 范围
81+
82+ ````js
8083 let start = boxArr.indexOf(this);
8184 let end = boxArr.indexOf(lastChecked);
82- ```
83- 3 . 截取该范围内的数组元素,并改变选中状态
85+ ````
86+
87+ 3 . 截取该范围内的数组元素,并改变选中状态
88+
8489 ```js
8590 boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
8691 .forEach(input => input.checked = onOff);
8792 ```
88- 4 . 确定选中 or 取消选中
89- ```js
93+
94+ 4 . 确定选中 or 取消选中
95+
96+ ````js
9097 onOff = lastChecked.checked ? true : false;
91- ```
92- 5 . 标记 A 值
93- ```js
98+ ````
99+
100+ 5 . 标记 A 值
101+
102+ ````js
94103 if(!lastChecked) lastChecked = this;
95104 /* ... */
96105 lastChecked = this;
97- ```
106+ ````
98107
99108注意,以上几点是按点抽出的分块代码,整合起来的解决办法如下:
100109
Original file line number Diff line number Diff line change 128128 lastChecked = this ;
129129 }
130130
131- let swift = false ;
131+ let onOff = false ;
132132// 处理方法二:利用数组索引获取需要选中的范围
133133 function handleCheck1 ( e ) {
134134 if ( ! lastChecked ) lastChecked = this ;
135- swift = lastChecked . checked ? true : false ;
135+ onOff = lastChecked . checked ? true : false ;
136136 if ( e . shiftKey ) {
137137 let start = boxArr . indexOf ( this ) ;
138138 let end = boxArr . indexOf ( lastChecked ) ;
139139 boxArr . slice ( Math . min ( start , end ) , Math . max ( start , end ) + 1 )
140- . forEach ( input => input . checked = swift ) ;
140+ . forEach ( input => input . checked = onOff ) ;
141141 console . log ( start + "+" + end ) ;
142142 }
143143 lastChecked = this ;
You can’t perform that action at this time.
0 commit comments