[jQuery] radio 버튼 꾸미기 (radio 버튼 선택 유무 체크)

그대로의 radio 버튼을 사용하여도 되지만

작업을 하다보면 커스터마이징 해야하는 경우가 있다. 그때를 대비해서 미리 준비해 봅니다.

아래와 같이 적용해 줍니다.

HTML

 
<ul class="radio-list">
    <li class="active">
        <label>
            <span></span><input type="radio" name="RadioBtn" title="라디오버튼1" checked="checked" />라디오버튼1
        </label>
    </li>
    <li>
        <label>
            <span></span><input type="radio" name="RadioBtn" title="라디오버튼2" />라디오버튼2
        </label>
    </li>
    <li>
        <label>
            <span></span><input type="radio" name="RadioBtn" title="라디오버튼3" />라디오버튼3
        </label>
    </li>
</ul>
 

CSS

.radio-list{width:300px; margin:20px auto 0;}
.radio-list li{position:relative; font-size:13px; color:#000; border:1px solid #e2e2e2; background:#fbfbfb; padding:6px 10px; margin-bottom:-1px;}
.radio-list li.active{font-weight:bold;}
.radio-list li label span{display:inline-block; width:12px; height:12px; background:url(./img/radio_btn_off.gif) 0 0 no-repeat; vertical-align:middle; margin-right:10px;}
.radio-list li.active span{background:url(./img/radio_btn_on.gif) 0 0 no-repeat;}
.radio-list li label input{position:absolute; top:11px; left:10px; width:12px; height:12px; opacity:0; -webkit-filter:alpha(opacity=0); filter:alpha(opacity=0);}
 

JAVASCRIPT

$(document).ready(function(){
 
    $(".radio-list li label").click(function(){
 
        var list = $(".radio-list li");
        var thisList = $(this).parent("li");
        var checkRadio = $(this).children("input").is(":checked"); //체크유무 (체크면 true, 아니면 false)
        
        if ( checkRadio == true ) {
            list.removeClass("active");
            thisList.addClass("active");
        }else{
            list.removeClass("active");
            thisList.removeClass("active");
        }
        
    });
 
})
 

적용화면 입니다. ^^

실제 적용 파일을 올려봅니다.

사용하실 분들은 참고해서 사용해 주세요.~

라디오버튼 꾸미기.zip