hidden radio button with label

by ravimallya

HTML

<div class="skin-chooser">
    <div class="relative">
        <label for="input1" class="red"></label>
        <input ID="input1" type="radio" name="color" />
    </div>
    <div class="relative">
        <label for="input2" class="green"></label>
        <input ID="input2" type="radio" name="color" />
    </div>
    <div class="relative">
        <label for="input3" class="yellow"></label>
        <input ID="input3" type="radio" name="color" />
    </div>
</div>

CSS

.skin-chooser {
    width: 150px;
}
.skin-chooser .relative {
    position: relative;
    margin-bottom:5px;
}
.skin-chooser .relative label {
    display: block;
    width:30px;
    height:30px;
    cursor: pointer;
}
label.red {
    background:red;
}
label.green {
    background:green;
}
label.yellow {
    background:yellow;
}
.skin-chooser .relative label:hover, .skin-chooser .relative label:active {
    border-radius: 4px;
    box-shadow: inset 0px 0px 4px #333;
}
.skin-chooser .relative .active {
 
    border-radius: 99px;
    box-shadow: inset 0px 0px 4px #333;
}
.skin-chooser .relative input[type="radio"] {
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0;
    z-index: -1;
}

JavaScript

$('.skin-chooser .relative').each(function() {
    var rdb= $(this).children('input:radio');
    rdb.click(function() {
        if($(this).prop('checked', true)) {
           alert('hi');
        $(this).prev('label').addClass('active');
        }
        else {
                       alert('heeei');
        $(this).prev('label').removeClass('active');
        }
    });
});