설명

vanillaJS로 만들어진 전체동의 체크박스, 보통 이용약관 등에 많이 사용된다.

조건

전체동의 클릭 시 모든 체크박스 체크
전체동의 클릭 해제 시 모든 체크박스 체크 해제
전체동의 체크박스 외 체크박스가 모두 체크 될 시 전체동의 체크박스 체크
전체동의 체크박스 외 체크박스가 모두 체크 해제 될 시 전체동의 체크박스 체크 해제

구현

See the Pen [VanillaJs] 전체 동의 체크 박스 by recordboy (@recordboy) on CodePen.

HTML

<div id="checkWrap">
    <label for="cheeck01"><input type="checkbox" id="cheeck01" />전체 동의</label>
    <label for="cheeck02"><input type="checkbox" id="cheeck02" />동의</label>
    <label for="cheeck03"><input type="checkbox" id="cheeck03" />동의</label>
    <label for="cheeck04"><input type="checkbox" id="cheeck04" />동의</label>
</div>

CSS

#checkWrap {
    width: 120px;
}

#checkWrap label {
    display: block;
    margin: 5px;
    font-size: 14px;
}

#checkWrap label input[type="checkbox"] {
    margin-right: 5px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#checkWrap label:first-child input[type="checkbox"] {
    width: 30px;
    height: 30px;
}

JavaScript

window.onload = function(){
    var checkWrap = document.getElementById('checkWrap'),
        check = checkWrap.getElementsByTagName('input');
    checkWrap.addEventListener('click', function(e){
        var target = e.target,
            checkNum = 0;
        if(target === check[0]){
            if(target.checked){
                for(var i = 1;i < check.length;i++){
                    check[i].checked = true;
                };
            }else{
                for(var i = 1;i < check.length;i++){
                    check[i].checked = false;
                };
            };
        }else{
            for(var i = 1;i < check.length;i++){
                if(check[i].checked){
                    checkNum++;
                };
            };
            if(checkNum >= check.length - 1){
                check[0].checked = true;
            }else{
                check[0].checked = false;
            };
        };
    });
};