체크 드래그 구현 (pure JS)

checkdrag.js

// 이거 보고 대충 만듦 http://cross-browser.com/x/examples/clickndrag_checkboxes.php
//  낡은 브라우저 지원이 뭐죠 먹는건가요

window.onload = function () {
    enableDragCheckGroup('input[type="checkbox"]');
};

// 체크 드래그 구현 (vanilla js)
// 해당 셀렉터에 대한 함수화
function enableDragCheckGroup(selector) {
    // 지역변수 : 체크박스 그룹이 체크되었는지 확인하기 위한 용도
    var checked = false;
    var hoveredElemCount = 0; // 한 개만 선택할때의 문제를 해결하기 위한 용도
    
    // 마우스를 떼면 체크상태 해제
    document.onmouseup = function () {
      if (checked === true) {
          if (hoveredElemCount === 1 && (event.target.nodeName === 'INPUT') ) {
              event.target.onmouseover(event);
          }
          checked = false;
      }
    }
    
    // 전체 체크박스 선택
    var checkboxes = document.querySelectorAll(selector);
    
    // 제일 간단해보이는 이터레이션 구현을 갖다썼음
    for(var i = 0; i < checkboxes.length; ++i) {
        var elem = checkboxes[i];
        
        elem.onmousedown = function (event) {
            checked = true;
            hoveredElemCount = 0;
            event.target.onmouseover(event);
        }
        elem.onmouseover = function (event) {
            if (checked === true)
                event.target.checked = event.target.checked ? '' : 'checked';
                hoveredElemCount++;
        }
    }
}