JavaScript 30 Day -- 09 Shift 的多選功能

效果實現：

提供按下 Shift 鍵後進行多選操作的功能。

關鍵點：

獲取所有的 <input> 元素，並添加事件監聽

const inpts= document.querySelectorAll('.inbox input[type="checkbox"]'); || var inpts = document.querySelectorAll("input"); 
inpts.forEach(box => box.addEventListener('click', handleCheck));

javascript

  var inpts = document.querySelectorAll("input");
  // inpts.forEach(foo => foo.addEventListener("click",shiftChange));
  inpts.forEach(foo => foo.addEventListener("click",handleCheck1));



  var inptArr = Array.from(inpts);
  var lastCheckbox,lastChecked;
  var onOff = false;

  function shiftChange(e){
        // console.log(e);
        // console.log(e.shiftKey); 
        // console.log(e.shiftKey,this.checked);
        console.log(lastCheckbox + '----------1');
        var inBetween = false;
        if(e.shiftKey && this.checked){
            // console.log(e.shiftKey,this.checked);
            inpts.forEach(foo => {

                // console.log(foo);
                // alert(lastCheckbox + '----2');
                console.log(lastCheckbox + '----2');
                if(foo === this || foo === lastCheckbox){
                    inBetween = !inBetween;
                    // console.log('----------');
                    console.log(lastCheckbox + '----3');
                    // alert(lastCheckbox + '----3');
                }

                if(inBetween){
                    // foo.checked = !foo.checked;
                    foo.checked = true;
                }

            })
        }

        lastCheckbox = this;
        // console.log(lastCheckbox);
  }



  function handleCheck1(e) {

    if(!lastChecked) lastChecked = this;    //給一個標記 當按住shift的時候，標記第一個選中的

    onOff = lastChecked.checked ? true : false; //確定選中 or 取消選中
    console.log(onOff);

    if(e.shiftKey) {

        let start = inptArr.indexOf(this);  //標記當前選中的下標索引

        let end = inptArr.indexOf(lastChecked); //標記之前選中的下標索引

        inptArr.slice(Math.min(start, end), Math.max(start, end) + 1).forEach(input => input.checked = onOff);  //組成一個新的數組，給新的數組添加 onoff

    }
    lastChecked = this; //選中一次就替換一次
}