[javascript] 체크박스 전체 선택 및 해제 / How to check all checkboxes using javascript| sangria.javascript.library

🎈 예제 Example

• 전체
• a
• b
• c

---

💻 HTML

<label><input type="checkbox" class="all_check">전체</label>
<label><input type="checkbox" class="check_list" value="a">a</label>
<label><input type="checkbox" class="check_list" value="b">b</label>
<label><input type="checkbox" class="check_list" value="c">c</label>

---

💻 사용법 How to use

// checkBoxToggleEvent('전체 선택 선택자', '기본 선택 선택자');
checkBoxToggleEvent('.all_check', '.check_list');

---

💻 코드 Code (ES6+)

/**
 * 전체 체크버튼이 활성화 상태에 따른 기본 체크박스 전체 선택
 * @param all_selector 전체 체크박스 셀렉터
 * @param check_selector 체크박스 셀렉터
 */
function checkAllToggle(all_selector, check_selector){
    let el_all_check = document.querySelector(all_selector);
    let el_check_all = document.querySelectorAll(check_selector);
    let is_check = el_all_check.checked;

    if( is_check === true ){
        el_check_all.forEach((checkbox) => {
            if( checkbox.disabled !== true ){
                checkbox.setAttribute('checked', 'checked');
                checkbox.checked = true;
            }
        })
    } else {
        el_check_all.forEach((checkbox) => {
            checkbox.removeAttribute('checked', 'checked');
            checkbox.checked = false;
        })
    }
}

/**
 * 체크박스 선택수에 따라 전체 선택 체크 활성/비활성
 * @param all_selector 전체 체크박스 셀렉터
 * @param check_selector 체크박스 셀렉터
 */
function checkBoxToggle(all_selector, check_selector){
    let el_all_check = document.querySelector(all_selector);
    let checkbox_ln = document.querySelectorAll(check_selector+':enabled').length;
    let check_ln = document.querySelectorAll(check_selector+':checked:enabled').length;
    if( checkbox_ln === check_ln ){
        el_all_check.setAttribute('checked', 'checked');
        el_all_check.checked = true;
    } else {
        el_all_check.removeAttribute('checked', 'checked');
        el_all_check.checked = false;
    }
}

/**
 * 체크박스 토글 이벤트
 * @param all_selector 전체 체크박스 셀렉터
 * @param check_selector 체크박스 셀렉터
 */
function checkBoxToggleEvent(all_selector, check_selector){
    // 체크박스(전체) 변경시
    let el_all_check = document.querySelector(all_selector);
    // 신규 이벤트
    el_all_check.addEventListener('change', function(){
        checkAllToggle(all_selector, check_selector);
    });

    // 체크박스(기본) 변경시
    let el_check_all = document.querySelectorAll(check_selector);
    el_check_all.forEach((el_check, idx) => {
        el_check.addEventListener('change', function(){
            checkBoxToggle(all_selector, check_selector);
        });
    })
}

 

sangria.javascript.library
Github repository

eleninjaytech@gmail.com

---

관련링크

- jQuery 버전 체크박스 링크