Radio button
 

Подскажите пожалуйста как сделать
три радио кнопки оформленные по разному
Этот вариант делает мне три кнопки одинаковыми и это понятно так как классы одинаковые для всех, но вот проблема в том что если я создаю новый класс все ровно не работает ...

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$(".RadioClass").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
			$(this).next("label").addClass("RadioSelected");
		}
	});	
});
</script>


<style>




	.CheckBoxClass,.RadioClass{
		display: none;
	}
	.CheckBoxLabelClass{
		background: url("img/UnCheck.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 35px;	
		width: 81px;
		display: block;
	}
	.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
		text-decoration: underline;
	}
	.LabelSelected{
		background: url("img/Check.png") no-repeat;
	}
	.RadioLabelClass{
		background: url("img/UnCheck.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 35px;	
		width: 81px;
		display: block;	
		float: left;
	}
	.RadioSelected{
		background: url("img/Check.png") no-repeat;
	}
	
	

	
</style>

	<h3>Customize HTML control</h3>

	<div> <form id="zxc">
	<input checked="checked" id="Radio1" class="RadioClass" name="group1" type="radio" >
	<label id="Label1" for="Radio1" class="RadioLabelClass RadioSelected"></label>
	<input id="Radio2" class="RadioClass" name="group1" type="radio">

	<label id="Label2" for="Radio2" class="RadioLabelClass"></label>	
	<input id="Radio3" class="RadioClass" name="group1" type="radio">
	<label id="Label3" for="Radio3" class="RadioLabelClass"></label>		
	</form>
    </div>