js实现滑动选择checkbox

项目上最近有个需求，多个checkbox可以通过按下鼠标拖动鼠标选中checkbox，这样能方便选择多个复选框不用一个个手点

---

类似这种效果吧

滑动选择.gif

---

1. 思考🤔：首先我想到的是自己去实现这个需求，如果通过原生js实现，那么转到项目上写一个react组件也能实现。

2. 先是去网上百度了下有没有类似的需求，关于滑动选中发现网上几乎没有，于是乎自己动手写。

3. 滑动选中无非就是涉及到原生dom的三种事件：onmousedown(鼠标按下时的回调)、onmouseover(鼠标移动到目标元素上的回调)、onmouseup(鼠标松开的回调)
   这几个事件快忘记的正好可以回忆一波。

总体大概思路：按下鼠标记下开始节点的索引，并给checkout添加监听事件onmouseover，鼠标移动过程中记录当前(结束)节点索引，通过遍历设置索引范围内的checkbox元素为选中态。

以下是代码

1. html:

 <input name="0" onmousedown="addEvent(event)" onmouseup="removeEvent(event)" onclick="handleClick(event)" type="checkbox" /><br />
    <input name='1' onmousedown="addEvent(event)" onmouseup="removeEvent(event)" onclick="handleClick(event)" type="checkbox" /><br />
    <input name='2' onmousedown="addEvent(event)" onmouseup="removeEvent(event)" onclick="handleClick(event)" type="checkbox" /><br />
    <input name='3' onmousedown="addEvent(event)" onmouseup="removeEvent(event)" onclick="handleClick(event)" type="checkbox" /><br />

2. js:

function mouseoverChecked(e) {
      var element = document.querySelectorAll('input');
      debugger;
      endIndex = +e.target.name;
      console.log('结束索引', endIndex);
      element.forEach(item => {
        item.checked = false;
      });
      for(let i=startIndex; i < endIndex + 1; i++) {
        element[i].checked = true;
      }
    }
    // 鼠标按下去绑定onmouseover监听
    function addEvent(e) {
        var element = document.querySelectorAll('input');
        startIndex = +e.target.name;
      console.log('开始索引', startIndex);
      e.currentTarget.checked = !e.currentTarget.checked;
      element.forEach(item => {
      item.addEventListener('mouseover', mouseoverChecked)
      });
  }

  // 鼠标松开解绑onmouseover监听
  function removeEvent(e) {
    var element = document.querySelectorAll('input');
    //   console.log('结束索引', e.target.name);
      element.forEach(item => {
      item.removeEventListener('mouseover', mouseoverChecked)
      });
  }

3. 效果：

原生滑动.gif

4. 拓展

通过原生js能实现的需求，那么放到项目上不管使react技术栈还是vue相信都能封装一个好的插件，后续考虑封装下react组件。