Prindol

skydown

Administrator

Registered: 2011-07-25

Posts: 335

[JAVASCRIPT] selectbox, radiobox, checkbox 스타일 입히기

JS

        function selectboxFnc() {//셀렉트박스
            $('.selectbox select').each(function (index, value) {
                
                $(this).prev().html($(this).children('option:selected').text());
            }).bind('click change', function () {
                $(this).prev().html($(this).children('option:selected').text());
            });
        }
        function radioboxFnc() {//라디오박스
            var _rdi = $('.radio');
            _rdi.click(function() {
                var _name = $(this).find('input').attr('name');
                var _radio = $('.radio input[name$='+_name+']');
                var _index = _radio.parent().index(this);
                _radio.each(function(index, value) {
                    if(_index == index) {
                        $(this).checked = true;
                        $(this).parent().removeClass('off').addClass('on');
                    } else {
                        $(this).checked = false;
                        $(this).parent().removeClass('on').addClass('off');
                    }
                });
            });
        }
        function checkboxFnc() {//체크박스
            var _chk = $('.checkbox .chk');
            _chk.each(function() {
                if($(this).find('input').is(':checked')) {
                    $(this).removeClass('off').addClass('on');
                } else {
                    $(this).removeClass('on').addClass('off');
                }
            }).click(function() {
                if($(this).find('input').is(':checked')) {
                    $(this).removeClass('off').addClass('on');
                } else {
                    $(this).removeClass('on').addClass('off');
                }
            });
        }

RADIO

<span class="radio radio1 on">
    <input checked="checked" id="loginChk1" name="loginChk" type="radio" />
    <label><img src="img/txt_login_01.gif" alt="학생" /></label>
</span>

SELECTBOX

<span class="selectbox">
    <span>그룹사 선택</span>
    <select>
        <option>그룹사 선택</option>
        <option>선택1</option>
        <option>선택2</option>
    </select>
</span>

.selectbox {position:relative; display:inline-block; *display:inline; zoom:1; width:309px; height:33px; background:url(bg_select.gif) no-repeat 0 0;}
.selectbox span {display:block; height:100%; padding:0 33px 0 16px; color:#5b5b5b; line-height:35px;}
.selectbox select {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}

---

http://cheolho.deviantart.com/