Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
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
Archives
Today
Total
관리 메뉴

web sprit

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

스크립트/J-Query

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

커드만 2016. 6. 10. 21:52

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

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


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


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<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>
 
cs



CSS

1
2
3
4
5
6
7
8
.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);}
 
cs



JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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");
        }
        
    });
 
})
 
cs


적용화면 입니다. ^^

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

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



Comments