JavaScript checkbox / 자바스크립트 체크박스 전체선택 및 해제 이벤트

HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
<head>
<title>체크박스 테스트</title>
</head>
<body>
 
<h1>전체체크 선택/해제 테스트</h1>
 
<table>
<tr>
<th><input type="checkbox" name="chkAll"></th>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<th>전체동의</th>
</tr>
<tr>
<td><input type="checkbox" name="chkAgree"></td>
<td>동의</td>
</tr>
<tr>
<td><input type="checkbox" name="chkAgree"></td>
<td>동의</td>
</tr>
<tr>
<td><input type="checkbox" name="chkAgree"></td>
<td>동의</td>
</tr>
</table>
 
</body>
<script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</script>
</html>
 
Colored by Color Scripter

cs

js 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(document).on("click","input:checkbox[name=chkAll]",function(){
        var chkAt = '';
 
        if ($(this).prop('checked')) {
            chkAt = 'Y';
        } else {
            chkAt = 'N';
        }
        
        if(chkAt == 'Y'){
            $("input:checkbox[name=chkAgree]").prop('checked', true);
        } else {
            $("input:checkbox[name=chkAgree]").prop('checked', false);
        }
    });
      
    $(document).on("click","input:checkbox[name=chkAgree]",function(){
        var chkAt = '';
 
        $("input:checkbox[name=chkAgree]").each(function() {
            if($(this).prop('checked')){
                chkAt = 'Y';
            } else {
                chkAt = 'N';
                return false;
            }
        });
        
        if(chkAt == 'Y'){
            $("input:checkbox[name=chkAll]").prop('checked', true);
        } else {
            $("input:checkbox[name=chkAll]").prop('checked', false);
        }
    });
Colored by Color Scripter

cs

 