JavaScript/응용

[Javascript] 체크박스 전체선택/전체해제 구현

coding captain 2022. 8. 8. 20:20

checkbox는 true/false로 checked 를 나타낸다.

HTML 요소 선택자로 원하는 요소에 이벤트를 부여한뒤, 체크박스를 제어할 수 있다.

 

 

example.

먼저 아래와 같은 예제 화면을 만들어본다. 제어하기 쉽게 class, id 등을 지정해준다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
        .tr_head {
            border-bottom: 1px solid rgb(50, 50, 50);
        }
        
        .tr_body {
            border-bottom: 1px solid rgb(200, 200, 200);
            height: 24px;
        }
    </style>
</head>
<body>
    <table style="border-collapse: collapse">
        <colgroup>
            <col style="width: 30px">
            <col style="width: 200px">
            <col style="width: 80px">
            <col>
        </colgroup>
        <thead>
            <tr>
                <td class="tr_head" id="chkHead"><input type="checkbox"></td>
                <td class="tr_head">제목</td>
                <td class="tr_head">게시자</td>
                <td class="tr_head">조회수</td>
            </tr>        
        </thead>
        <tbody>
            <tr>
                <td class="tr_body articleChk"><input type="checkbox"></td>
                <td class="tr_body">this is a test</td>
                <td class="tr_body">hong</td>
                <td class="tr_body">3</td>
            </tr>
            <tr>
                <td class="tr_body articleChk"><input type="checkbox"></td>
                <td class="tr_body">hello</td>
                <td class="tr_body">choi</td>
                <td class="tr_body">12</td>
            </tr>
            <tr>
                <td class="tr_body articleChk"><input type="checkbox"></td>
                <td class="tr_body">look at me</td>
                <td class="tr_body">jo</td>
                <td class="tr_body">10</td>
            </tr>
            <tr>
                <td class="tr_body articleChk"><input type="checkbox"></td>
                <td class="tr_body">i love you</td>
                <td class="tr_body">kim</td>
                <td class="tr_body">86</td>
            </tr>
            <tr>
                <td class="tr_body articleChk"><input type="checkbox"></td>
                <td class="tr_body">no jam</td>
                <td class="tr_body">lee</td>
                <td class="tr_body">5</td>
            </tr>
        </tbody>
    </table>
    <script src="./prj101.js"></script>
</body>
</html>

 

 

 

자바스크립트 파일 (prj101.js)

window.onload = function() {
    start();
}

먼저 html 요소가 로드 완료되면 javascript 가 동작하도록 onload 를 걸어준다. start() 함수를 호출한다.

 

 

 

var start = function() {
    var chkHead = document.getElementById('chkHead');
    var inputobj = chkHead.children[0];		//체크박스 상단에 이벤트리스너 추가
    inputobj.addEventListener('click', function(){
        onCheckEvent();
    });
}

id 값으로 체크박스 상단 요소를 가져온다. 체크박스에는 체크 이벤트를 감지하도록 이벤트를 걸어준다. click 시 onCheckEvent() 함수를 호출한다.

 

 

var onCheckEvent = function() {
    var checkHead = document.getElementById('chkHead').children[0];
    var ck = checkHead.checked;	//상단 체크박스의 체크여부가 담긴다(true||false)
    var articleChk = document.getElementsByClassName('articleChk');
    var cnt = articleChk.length;
    
    //반복문 수행하면서 상단 체크박스와 체크여부를 일치시킨다
    for (var i=0; i<cnt; i++) {
        var cc = articleChk[i].children[0];
        cc.checked = ck;
    }
}

 

 

 

JS 파일 전체코드

var start = function() {
    var chkHead = document.getElementById('chkHead');
    var inputobj = chkHead.children[0];
    inputobj.addEventListener('click', function(){
        onCheckEvent();
    });
}

var onCheckEvent = function() {
    var checkHead = document.getElementById('chkHead').children[0];
    var ck = checkHead.checked;
    var articleChk = document.getElementsByClassName('articleChk');
    var cnt = articleChk.length;
    
    for (var i=0; i<cnt; i++) {
        var cc = articleChk[i].children[0];
        cc.checked = ck;
    }
}

window.onload = function() {
    start();
}