Styled Radiolist

By Jiří Zralý, @Zraly

HTML

<div class="switch">
    <input type="radio" name="php" id="priklad1-0" checked="checked" value="ano" />
    <label for="priklad1-0">Yes</label>
    <input type="radio" name="php" id="priklad1-1" value="ne" />
    <label for="priklad1-1">No</label>
    <input type="radio" name="php" id="priklad1-2" value="mozna" />
    <label for="priklad1-2">Maybe</label>
</div>

<div class="switch">
    <input type="radio" name="php" id="priklad2-0" checked="checked" value="1" />
    <label for="priklad2-0">ON</label>
    <input type="radio" name="php" id="priklad2-1" value="0" />
    <label for="priklad2-1">OFF</label>
</div>

CSS

body
{
    font-family: 'Helvetica Neue', Arial;
    margin: 20px;
}  

.switch
{
    display: block;
    float: left;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    background: #eee;
    border: 1px solid #aaa;
    padding: 2px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    margin-left: 20px;
}

.switch input[type=radio]
{
    display: none;
}

.switch label
{
    display: block;
    float: left;
    padding: 3px 6px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
}

.switch label:hover
{
    text-shadow: 0 0 2px #fff;
    color: #888;
}

.switch label.checked
{
    background: #0077ff;
    color: #eee;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(top, #5f97e6, #2d5791);
    background: -moz-linear-gradient(top, #5f97e6, #2d5791);
    background: -ms-linear-gradient(top, #5f97e6, #2d5791);
    cursor: default;
}

JavaScript

$(".switch label:not(.checked)").click(function(){
    var label = $(this);
    var input = $('#' + label.attr('for'));
    
    if (!input.prop('checked')){
        label.closest('.switch').find("label").removeClass('checked');                        
        label.addClass('checked'); 
        input.prop('checked', true);
    }
});

$(".switch input[checked=checked]").each(function(){
    $("label[for=" + $(this).attr('id') + "]").addClass('checked');
});