[Jquery] 체크박스 전체 체크 , 해제 하는 방법

체크박스를 이용해서 개발을 진행할때 전체 버튼을 이용해서 체크박스들을 체크하거나 해제해야 하는 경우가 빈번하게 있습니다. 그래서 간단하게 샘플소스를 구현해 봤습니다.

 

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
36
37
38
<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //전체 체크박스 클릭
            $("#checkAll").click(function() {
                if ($("#checkAll").prop("checked")) {
                    $(".test").prop("checked"true);
                } else {
                    $(".test").prop("checked"false);
                }
            });
            //전체 체크박스 선택중 체크박스 하나를 풀었을때 "전체" 체크해제
            $(".test").click(function() {
                if ($("input[name='check']:checked").length == 4) {
                    $("#checkAll").prop("checked"true);
                } else {
                    $("#checkAll").prop("checked"false);
                }
            });
        });    
    </script>
</head>
<body>
    <input type="checkbox" class="test" name="checkAll" id="checkAll">
    <span>전체</span>
    <input type="checkbox" class="test" name="check">
    <span>KT</span>
    <input type="checkbox" class="test" name="check">
    <span>SKT</span>
    <input type="checkbox" class="test" name="check">
    <span>LGU+</span>
    <input type="checkbox" class="test" name="check">
    <span>알뜰폰 등 기타</span>
</body>
</html>
cs

 

아래는 샘플소스를 실행한 내용입니다.

 

 

전체 KT SKT LGU+ 알뜰폰 등 기타

 

 

댓글

Designed by JB FACTORY