체크박스 만들기

미체크 상태 -> 체크 상태로 만드는 방법

$체크박스.addClass("check");

addClass()메서드를 이용하면 노드에 클래스를 동적으로 추가할 수 있다.

체크 상태 -> 미체크 상태로

$체크박스.removeClass("check");

removeClass()메서드를 이용하면 노드에 적용된 클래스를 동적으로 제거할 수 있다.

 
    <script>
 
        $(document).ready(function() {
            var bCheck = false;
            var $chk = $(".checkArea .checkb");
 
            $(".checkArea").click(function() {
                
                bCheck = !bCheck;
                if (bCheck == true) {
                    $chk.addClass("check");
                } else {
                    $chk.removeClass("check");
                }
            })
        })
 
    </script>
 
    <div class="checkArea">
        <div class="checkb"> </div>
        <div class="label">
            체크박스
        </div>
    </div>
 

체크박스의 선택 유뮤를 담을 스위치 변수인 bcheck라는 이름을 가진 변수를 하나 추가한다. 시작값은 선택돼있지 않은 의미로 false로 해준다

체크 박스를 클릭할 때마다 bCheck 변수값을 토글 시켜준다 값이 true인 경우 false로 false인 경우 true로 만들어준다