// Fancy radio buttons
function customRadio(radioName, excludeClass){
var selector = 'input[type="'+ radioName +'"]:not(".'+excludeClass+'")';
var radioButton = $(selector);
$(radioButton).each(function(){
$(this).wrap( '<span class="custom-radio"></span>' );
if($(this).is(':checked')){
$(this).parent().addClass("selected");
}
});
$(radioButton).click(function(){
var thisButton = 'input[name="'+ $(this).attr('name') +'"]';
$(thisButton).closest('.custom-radio').removeClass('selected');
$(thisButton).each(function () {
$(this).is(':checked') ? $(this).closest('.custom-radio').addClass('selected') : $(this).closest('.custom-radio').removeClass('selected');
});
});
}
customRadio('radio', 'not-fancy');
// CSS
.custom-radio {
width: 20px;
height: 20px;
display: inline-block;
position: relative;
z-index: 1;
top: 3px;
background: url(../images/radio.png) no-repeat;
}
.custom-radio.selected {
background: url(../images/radio-selected.png) no-repeat;
}
.custom-radio input[type="radio"] {
margin: 1px;
position: absolute;
z-index: 2;
cursor: pointer;
outline: none;
opacity: 0;
/* CSS hacks for older browsers */
_noFocusLine: expression(this.hideFocus=true);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
}