[jQuery] 체크박스 전체 선택 및 해제 / How to check all checkboxes using jQuery

✔ jQuery 테스트 버전 1.12.4 및 3.5.1

---

🎈 예제 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_check_selector = $(check_selector);
    if( $(all_selector).is(':checked') === true ){
        el_check_selector.each(function(){
            let el_this = $(this);
            if( el_this.is(':disabled') !== true ){
                el_this.attr({checked:true}).prop({checked:true});
            }
        });
    } else {
        el_check_selector.attr({checked:false}).prop({checked:false});
    }
}

/**
 * 체크박스 선택수에 따라 전체 선택 체크 활성/비활성
 * @param all_selector 전체 체크박스 셀렉터
 * @param check_selector 체크박스 셀렉터
 */
function checkBoxToggle(all_selector, check_selector){
    let el_all_selector = $(all_selector);
    let checkbox_ln = $(check_selector).length;
    let check_ln = $(`${check_selector}:checked`).length;
    if( checkbox_ln === check_ln ){
        el_all_selector.attr({checked:true}).prop({checked:true});
    } else {
        el_all_selector.attr({checked:false}).prop({checked:false});
    }
}

/**
 * 체크박스 이벤트
 * @param all_selector 전체 체크박스 셀렉터
 * @param check_selector 체크박스 셀렉터
 */
function checkBoxToggleEvent(all_selector, check_selector){
    // 체크박스(전체) 변경시
    let el_all_selector = $(all_selector);
    el_all_selector.on('change', function(){
        checkAllToggle(all_selector, check_selector);
    });

    // 체크박스(기본) 변경시
    let el_check_selector = $(check_selector);
    el_check_selector.on('change', function(){
        checkBoxToggle(all_selector, check_selector);
    });
}

 

eleninjaytech@gmail.com

 

---

관련링크

- javascript 바닐라 코드 버전 체크박스 링크