开发者社区> 黎跃春> 正文

Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能

简介: Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能 作者:©liyuechun简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。
+关注继续查看

作者:©liyuechun
简介:JavaScript30Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 10 篇。完整中文版指南及视频教程在 从零到壹全栈部落

项目效果

操作方法

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

实现方法

方法一

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

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


const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let startChecked;

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

checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

方法二

上面会出现一个问题,初次加载页面时,按住 Shift 再点击某一项,此项之后的元素都会被选中。此外,对于取消选中,无法批量操作。下面方法三是缉熙Soyaine 的操作逻辑。方法三是我对Wes Bos实现方法逻辑的改进,方法二和方法三取消和选中均可批量操作。


let startChecked;
let onOff = false;
//    处理方法二:新增onOff变量存储复选框将要改变的状态
function handleCheck2(e) {
 let inBetween = false;
 if (e.shiftKey) {
   onOff = startChecked.checked ? true : false;
   boxs.forEach(input => {
     console.log(input);
     if (input === startChecked || input === this) {
       inBetween = !inBetween;
     }
     if (inBetween && input !== startChecked || input === this) {
       input.checked = onOff;
     }
   });
   startChecked = this;
 }
 startChecked = this;
}

onOff = startChecked.checked ? true : false; 根据startChecked设置要改变的状态。同时在if (inBetween && input !== startChecked || input === this)代码里面做了修改,新增了|| input === this,否则会出现最后一个的状态和其他复选框状态不一致的bug。

方法三

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

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

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

// 处理方法二:利用数组索引获取需要选中的范围
function handleCheck1(e) {
    if(!startChecked) startChecked = this;
    onOff = startChecked.checked ? true : false;
    if(e.shiftKey) {
        let start = boxArr.indexOf(this);
        let end = boxArr.indexOf(startChecked);
        boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                   .forEach(input => input.checked = onOff);
        console.log(start + "+" + end);
    }
    startChecked = this;
}
  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(startChecked);
  3. 截取该范围内的数组元素,并改变选中状态

    boxArr.slice(Math.min(start, end), Math.max(start, end) + 1)
                       .forEach(input => input.checked = onOff);
  4. 确定选中 or 取消选中

    onOff = startChecked.checked ? true : false;
  5. 标记 A 值

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

源码下载

Github Source Code

春哥简介

简介: 资深讲师,全栈工程师;区块链、高可用架构技术爱好者。
个人博客:http://liyuechun.org
新浪微博:黎跃春-追时间的人
github:http://github.com/liyuechun

技术交流

  • 区块链技术交流QQ群:348924182
  • 「区块链部落」官方公众号

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
带交互功能的HTML5+JS跳动的爱心
带交互功能的HTML5+JS跳动的爱心
17 0
带交互功能的HTML5+JS黑客帝国
带交互功能的HTML5+JS黑客帝国
23 0
带交互功能的HTML5+JS爱心樱花
带交互功能的HTML5+JS爱心樱花
12 0
带交互功能的HTML5+JS烟花特效
带交互功能的HTML5+JS烟花特效
19 0
VUE中最简单的js调用微信扫一扫功能
VUE中最简单的js调用微信扫一扫功能
142 0
js实现多选、全选、反选、取消选择(篇一)
js实现多选、全选、反选、取消选择(篇一)
83 0
JS案例:支持PC端和Mobile端的Canvas电子签名功能
JS案例:支持PC端和Mobile端的Canvas电子签名功能
99 0
(巨好使,详细,解析URl,URl自定义传参)js URl中快速自定义传参,并且实现参数解析 修改 和新增,替换功能
我们在日常开发中经常会遇到要对url中的参数进行修改和新增,但是自己手动每次敲就会导致代码很麻烦,且不易维护
64 0
+关注
黎跃春
区块链技术爱好者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的对象
立即下载
JS零基础入门教程(上册)
立即下载