라디오/체크박스 만들기

[html]

<div class="cont">

            <div class="question_bx">

                <strong class="one">1. 라디오 스타일</strong>

                <ul class="radio_wrap">

                    <li><input type="radio" id="qt01-1" name="qt01-1" value="qt01"><label for="qt01-1">라디오1</label></li>

                    <li><input type="radio" id="qt01-2" name="qt01-2" value="qt01"><label for="qt01-2">라디오2</label></li>

                    <li><input type="radio" id="qt01-3" name="qt01-3" value="qt01"><label for="qt01-3">라디오3</label></li>

                </ul>

            </div>

            <div class="question_bx">

                <strong class="one">2. 체크박스 스타일</strong>

                <ul class="ckb_wrap">

                    <li><input type="checkbox" id="qt03-1" name="qt03-1" value="qt03"><label for="qt03-1">체크박스1</label></li>

                    <li><input type="checkbox" id="qt03-2" name="qt03-2" value="qt03"><label for="qt03-2">체크박스2</label></li>

                    <li><input type="checkbox" id="qt03-6" name="qt03-6" value="qt03"><label for="qt03-6">기타</label><input type="text" class="ans_etc"></li>

                </ul>

            </div>

        </div>

 

[css]

input[type=radio]{

    -webkit-appearance:none;

    position: absolute;

    width: 24px;

    height: 24px;

    z-index: 9;

    margin: 0 0 0 0px;

    top: 0;

    }

input[type=checkbox]{

    -webkit-appearance:none;

    position: absolute;

    width: 24px;

    height: 24px;

    z-index: 9;

    margin: 0 0 0 10px;

    opacity: 0;

    }

label{position: relative;z-index: 10; font-size: 16px; color:#222; background: url(../images/radio_off.png) no-repeat;background-size: 24px 24px;padding-left: 34px;height: 24px; line-height: 2.2rem; top: 0;display:inline-block;}

label.checking{background: url(../images/radio_on.png) no-repeat;background-size: 24px 24px;}

.ckb_wrap label{background: url(../images/ckb_off.png) no-repeat;background-size: 24px 24px;}

.ckb_wrap label.checking{background: url(../images/ckb_on.png) no-repeat;background-size: 24px 24px;}

 

 

[script]

 

<script type="text/javascript">

        $(document).ready(function() {

            $('input[type=radio]').click(function() {

                var labelID = $(this).attr('id');

                $(this).parent().parent().find('label').removeClass('checking');

                $('label[for="'+labelID+'"]').addClass('checking');

            });

            $('input[type=checkbox]').click(function() {

                var labelID = $(this).attr('id');

                $('label[for="'+labelID+'"]').toggleClass('checking');

            });

        });

    </script>

 

* 간단한 설문조사 같은 경우 라디오/체크박스 기본 스타일을 만들고 추가로 다른 디자인일때 class 붙여서 추가 css 적용

* 큰 범위에는 처음부터 rdo-style01, rdo-style02 / ckb-style01, ckb-style02.. 처럼 스타일 넘버 붙여서 만들기

* 스크립트 .parent() 가 올바르게 되어 있는지 확인