Skip to content

Commit

Permalink
day10-update
Browse files Browse the repository at this point in the history
  • Loading branch information
liyuechun committed Jul 26, 2017
1 parent 5529704 commit 2c2af22
Showing 1 changed file with 20 additions and 14 deletions.
34 changes: 20 additions & 14 deletions 10 - JS 实现 Checkbox 中按住 Shift 的多选功能/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function handleCheck0(e) {
startChecked = this;
}
```


### 方法二

Expand Down Expand Up @@ -108,39 +108,39 @@ function handleCheck1(e) {

1. 转换 Nodelist 为数组

````js
```js
const boxs = document.querySelectorAll('.inbox input[type="checkbox"]');
const boxArr = Array.from(boxs);
````

2. 针对按下了 Shift 键的情况,获取 A-B 范围

````js
```js
let start = boxArr.indexOf(this);
let end = boxArr.indexOf(startChecked);
````

```
3. 截取该范围内的数组元素,并改变选中状态

```js
boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
.forEach(input => input.checked = onOff);
```

4. 确定选中 or 取消选中

````js
```js
onOff = startChecked.checked ? true : false;
````

```
5. 标记 A 值

````js
```js
if(!startChecked) startChecked = this;
/* ... */
startChecked = this;
````

```
## 源码下载

[Github Source Code](https://github.com/liyuechun/JavaScript30-liyuechun)
Expand All @@ -164,3 +164,9 @@ function handleCheck1(e) {
|关注全栈部落官方公众号,每晚十点接收系列原创技术推送|
|:---------:|
|![](http://orhm8wuhd.bkt.clouddn.com/quanzhanbuluo.png)|






0 comments on commit 2c2af22

Please sign in to comment.