Переключатель на jQuery

Изменим внешний вид обычного переключателя (switch) с помощью jQuery.

HTML

<form action="" method="get">
<fieldset class="switch">
    <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
    <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>
<input type="submit" value="Обновить"/>
</form>
<div class="result">Переключатель установлен на значении: <span>on</span></div>

CSS

.switch{
    border:none;
    background:left no-repeat;
    width:105px;
    height:46px;
    padding:0;
    margin:0;
}
.on, .off{
    width:50px;
    height:40px;
    display:inline-block;
    cursor:pointer;
}
.result{display:none; margin-top:5px; font-size:14px; color:#333;}
.result span{color:#C03; font-weight:700;}

JS

Подключаем jQuery библиотеку и скрипт:

$(document).ready(function(){
    $('.switch').css('background', 'url("switch.png")');
    $('.on_off').css('display','none');
    $('.on, .off').css('text-indent','-10000px');
    $("input[name=on_off]").change(function() {
      var button = $(this).val();
      
        if(button == 'off'){ $('.switch').css('background-position', 'right'); }
        if(button == 'on'){ $('.switch').css('background-position', 'left'); }     
                
         $('.result span').html(button); 
         $('.result').fadeIn();
   });
});