Hold Shift to Check Multiple Checkboxes


Posted by wayne201299 on 2023-09-27

實作按著Shift鍵時將中間範圍的check選項全部選取

  1. 透過querySelectorAll將所有input type=check的element選取

    const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
    
  2. 監聽每個checkbox的點擊事件

    checkboxes.forEach((checkbox) => checkbox.addEventListener('click', markUnmark));
    
  3. 每次點擊時都要儲存上次被點擊的input,透過element的checked屬性得知選項是否被點選,當點擊與shift同時觸發,將所有checkbox遍歷一次,將上次點擊的與這次checkbox之間的所有選項打勾

    function markUnmark(e) {
       if (event.shiftKey && this.checked) {
         // Shift 鍵被按下
         let isChecking = false;
         checkboxes.forEach((checkbox) => {
           if (checkbox === lastChecked) {
             isChecking = true;
           }
    
           if (checkbox === this) {
             isChecking = false;
           }
           if (isChecking) {
             checkbox.checked = true
           }
    
         });
    
       }
       lastChecked = this
     }
    

知識點

  • input type為checkbox的element中可以透過checked屬性來判別是不是被勾選
  • Event中的shiftkey屬性可以得知Shift是否被按

#javascript







Related Posts

C++筆記 撲克牌問題2

C++筆記 撲克牌問題2

Context API 效能問題 - use-context-selector 解析

Context API 效能問題 - use-context-selector 解析

Python Table Manner - 程式碼風格

Python Table Manner - 程式碼風格


Comments