10 JS 实现 Checkbox 中 Shift 批量多选功能

作者:©缉熙Soyaine
简介:JavaScript30Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 10 篇。完整指南在 GitHub,喜欢请 Star 哦♪(*)

创建时间:2017-01-07
最后更新:2017-01-07

实现效果

shift 多选效果示例

初始文档中提供了一组 checkbox 类型的 input 元素,选中某个复选框时,其 <p> 标签中的文字会显示删除线。最终效果是,提供按下 Shift 键后进行多选操作的功能。 在线体验请点这里

过程指南

  1. 获取所有的 <input> 元素,并添加事件监听
    const boxs = document.querySelectorAll('.inbox input[type="checkbox"]');
    boxs.forEach(box => box.addEventListener('click', handleCheck));
    
  2. 编写 handleCheck 内部的处理逻辑(细节请看下一部分)

解决思路

在谈具体的代码时,先讲讲思路。首先来复现一下,当你按下 Shift 键进行多选时,发生了什么?

  1. 选中 A 项
  2. 按下 Shift
  3. 再选中 B 项
  4. A-B 之间的所有项都被选中

关键点就在于 A、B 划出了一个范围,在这个范围之内的元素状态发生了改变。A 是上一次操作选中的对象,B 是此次操作对象,之后的内容将会用这两个单词来叙述。下面的方案就依据划定范围的方法不同来进行区分。

方法一

Wes Bos 在文档里提供了一种解决办法:用一个变量,来标记这个范围。

变量初始值为 false,当按下 Shift 键且同时选中了某个元素的时候,遍历所有项,遍历过程中,若遇到 A 或 B,则将标记值取反。同时,将所有标记为 true 的项设置为选中。

let lastChecked;

//  处理方法一:用变量 inBetween 对需要选中的元素进行标记
function handleCheck0(e) {
    let inBetween = false;
    if(e.shiftKey && this.checked){
        boxs.forEach(input => {
            console.log(input);
            if(input === lastChecked || input ===this) {
                inBetween = !inBetween;
            }
            if(inBetween) {
                console.log("on");
                input.checked = true;
            }
    });
    }
    lastChecked = this;
}

延伸思考

上面会出现一个问题,初次加载页面时,按住 Shift 再点击某一项,此项之后的元素都会被选中。此外,对于取消选中,无法批量操作。所以我参照了 Stack Overflow 的一个答案: How can I shift-select multiple checkboxes like GMail? 改进得到第二种解决方案。

方法二

方法一中的 inBetween 仅仅表示此项是否在被选中的范围中,此处会赋给它更多的意义,用它来表示此项是选中还是未选中,而范围划定则由数组来解决。

首先将获取到的 <input> 组转化为数组,针对每次操作,获取 A 和 B,利用 indexOf() 来获得 A 和 B 在数组中的索引值,由此即可确定范围,并能通过 slice() 来直接截取 A-B 的所有 DOM 元素,并进行状态改变的操作,而变量 onOff 表示 A-B 范围内的状态,true 表示选中,false 表示取消选中。

  1. 转换 Nodelist 为数组
    const boxs = document.querySelectorAll('.inbox input[type="checkbox"]');
    const boxArr = Array.from(boxs);
    
  2. 针对按下了 Shift 键的情况,获取 A-B 范围
    let start = boxArr.indexOf(this);
    let end = boxArr.indexOf(lastChecked);
    
  3. 截取该范围内的数组元素,并改变选中状态
    boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                       .forEach(input => input.checked = onOff);
    
  4. 确定选中 or 取消选中
    onOff = lastChecked.checked ? true : false;
    
  5. 标记 A 值
    if(!lastChecked) lastChecked = this;
    /* ... */
    lastChecked = this;
    

注意,以上几点是按点抽出的分块代码,整合起来的解决办法如下:

const boxArr = Array.from(boxs);
let lastChecked;
let onOff = false;

// 处理方法二:利用数组索引获取需要选中的范围
function handleCheck1(e) {
    if(!lastChecked) lastChecked = this;
    onOff = lastChecked.checked ? true : false;
    if(e.shiftKey) {
        let start = boxArr.indexOf(this);
        let end = boxArr.indexOf(lastChecked);
        boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                   .forEach(input => input.checked = onOff);
        console.log(start + "+" + end);
    }
    lastChecked = this;
}

这样一来,挑战 10 就完!成!啦!恭喜走完了 1/3 的路程(o)/~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,639评论 1 302
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,591评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,050评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,169评论 0 180
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,976评论 1 258
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,876评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,476评论 2 273
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,229评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,095评论 6 234
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,579评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,356评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,698评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,272评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,168评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,605评论 3 210
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,645评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,035评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,609评论 2 232
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,698评论 2 233

推荐阅读更多精彩内容