This code can be used for skinned input type radiobutton

radio.css

.radiobox {
	background: url("../img/common/radiobox.png") no-repeat scroll 0 0 transparent;
    	cursor: pointer;
    	display: inline-block;
    	float: left;
    	height: 11px;
    	margin: 0 5px 0 0;
    	position: relative;
    	width: 11px;	
}

.radiobox.on {
    background-position: 0 -13px;
}

.radiobox input {
    cursor: pointer;
    height: 11px;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 11px;
}

radio.html

<div class="categoryRadio">
	<span class="radiobox">
		<input type="radio" checked="checked" id="radio_1" value="radio one" name="radio[]">
	</span>
</div>

radio.js

radioBox : function() {
	var radioBox = $('.radiobox');
	
	// if an input is selected in page loading
	radioBox.find('input[type="radio"]').each(function(index, key) {
		if ( $(this).is(':checked') ) {
			$(this).parent().addClass('on');
		}
	});
	
	radioBox.find('input[type="radio"]').on('change', function() {
		
		var parent = $(this).parents('.categoryRadio');
		parent.find('.radiobox').removeClass('on');
		
		if ( $(this).is(':checked')) {
			$(this).parent().addClass('on');
		}else {
			$(this).parent().removeClass('on');
		}
	});
},