iT邦幫忙

1

JS30 Day 10 - Hold Shift and Check Checkboxes學習筆記

今天的題目功能是當我們按下checkbox以後,按著shift不放,再按下另一個checkbox,會把兩個checkbox之間的checked都設為true,主要重點為邏輯判斷。

如下圖:

https://ithelp.ithome.com.tw/upload/images/20200604/201261825KbntPaSyI.png

首先,我們先獲取所有type為check的input並利用Array.from轉成陣列。
並設置firstCheck來儲存第一個按下的下標。

     const checkBox = Array.from(document.querySelectorAll('.item input[type="checkbox"]'));   
     
     let firstCheck = null;

而後我們在賦予每個checkbox click事件。

      checkBox.forEach(item => {
        item.addEventListener('click', clickHandler);
      });

再來我們寫一下按下checkbox的處理:

首先在event下有一個為shiftKey的屬性,可以判斷是否按著shift

接著,我們在判斷是否當前按下的input為checked,沒有的話就將第一個按下的firstCheck設為null,有的話就在進行一次判斷,判斷是否有按下shift不放,且我們第一個按下的firstCheck為true,沒有的話,就利用indexOf方法(會回傳元素於陣列中第一個被找到之index)將當前所按下input下標給儲存至firstCheck,有的話我們就去設置一個變數nowCheck去獲取當前下標。

再來就是對所有checkbox利用slice方法(回傳一個新陣列物件,為原陣列選擇之 begin 至 end(不含 end)參數為(begin,end))將兩個input之間的所有input的checked都改為true,因為我們可能由下案到上,故firstCheck不一定小於nowCheck,故利用Math.max,min去抓最大值(放後面)及最小值(放前面),最後再利用forEach對每個處理好的input的checked改為true即可。


  function clickHandler(e) {
        // console.log(e.shiftKey); // 當按著shift去check就會為true
        if (this.checked) {
          // 當按著shift且當前有按下check
          if (e.shiftKey && firstCheck !== null) {
            // 獲取當前的下標
            let nowCheck = checkBox.indexOf(this);
            // 利用Math.max,min去抓最大值(放後面)及最小值(放前面)
            checkBox.slice(Math.min(nowCheck, firstCheck), Math.max(nowCheck,        firstCheck)).forEach(item => {
              item.checked = true;
            });
          }
          // 如果第一個按下的input為checked,就儲存其下標
          firstCheck = checkBox.indexOf(this);
        } else {
          firstCheck = null;
        }
      }


尚未有邦友留言

立即登入留言