체크박스 만들기

퍼블리싱을 하다 보면 약관에 전체 선택, 혹은 일부를 선택할 수 있도록 되어있는 체크박스가 있는데
원하는 것만 선택하는것은 기본적인 체크박스 기능이고
버튼 하나로 전체를 선택하고 선택 삭제하는 화면을 만들어 보려고 한다.

1.html

    <button class="all">전체선택</button>
    <button class="remove">전체제거</button>

    <div class="wrap">
        <div class="chk-area">
            <input type="checkbox" name="skill" id="a1">
            <label for="a1">html</label>
        </div>

        <div class="chk-area">
            <input type="checkbox" name="skill" id="a2">
            <label for="a2">csss</label>
        </div>

        <div class="chk-area">
            <input type="checkbox" name="skill" id="a3">
            <label for="a3">js</label>
        </div>

        <div class="chk-area">
            <input type="checkbox" name="skill" id="a4">
            <label for="a4">psd</label>
        </div>
    </div>

중요한 점은
1)체크박스에서 짝이 될 label의 for와 input의 id를 맞춰준다(a1, a2등) 나중에 라벨만 클릭해도 체크박스에 체크가 되게끔 만들기 위해서이다.
2)name은 나중에 전체선택과 제거에 필요하니 전부 같은 name을 써 준다.

2.css

    <style>
        .chk-area.active {
            background: #f00;
        }
    </style>

chk-area에 active 클래스가 추가되면 배경을 빨강색으로 만들도록 한다.

3.jquery

<script>
        $('.all').click(function () {
            $('input:checkbox[name="skill"]').prop('checked', true);
            $('.chk-area').addClass('active');
        })
        //all버튼을 클릭하면
        //input의 타입이 checkbox이고 name이 skill인 것을 찾아 프로퍼티값을  true로 하고
        //chk-area에 active클래스를 추가하도록 한다.

        $('.remove').click(function () {
            $('input:checkbox[name="skill"]').prop('checked', false);
            $('.chk-area').removeClass('active');
        })
        //remove버튼을 클릭하면 위와 반대로 체크를 해제하고 active클래스를 삭제한다
        
        $('.chk-area').click(function () {
            if ($(this).find('input').prop('checked') == true) {
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        })
        //chk-area(label)를 클릭하면
        //만약 해당 chk-area의 하위 요소중 input의 프로퍼티값이 true라면
        //해당 chk-area에 active클래스를 추가하고
        //그렇지 않으면 해당 chk-area에서 active클래스를 삭제한다
    </script>

체크박스를 가린 결과물이다. 라벨의 before,after 등에 체크박스 모양을 바꾸고 싶은 대로 넣어서 변경하면 된다.