Радиокнопки

by KatSSS

HTML

<form class="order_tab" id="calc" action="/" method="post">
	<input type="radio" class="checkbox" id="econom" name="radio" checked />
	<input type="radio" class="checkbox" id="unive" name="radio"/>
	<input type="radio" class="checkbox" id="mini" name="radio" />
</form>	

<div class="autoblock">
			<div class="auto_select" id="econom">Первый!</div>	
			<div class="auto_select" id="unive">Второй!</div>
			<div class="auto_select" id="mini">Третий!</div>
	</div>

CSS

form {
	margin: 30px;
}
.autoblock {
	background-color: #f39b37;
	padding: 30px;
	text-align: center;
	width: 100px;
	margin: 0 auto;
}
.auto_select {
	display: none;
}
.auto_select.active {
	display: block;
}

JavaScript

$(".checkbox").change( function(){

		if(	$("#unive").prop("checked") ) 
		{	$('.autoblock #unive').addClass('active'); } 
		else {$('.autoblock #unive').removeClass('active');	}

		if(	$("#econom").prop("checked") ) 
		{	$('.autoblock #econom').addClass('active'); } 
		else { $('.autoblock #econom').removeClass('active'); }

		if(	$("#mini").prop("checked") ) 
		{	$('.autoblock #mini').addClass('active'); } 
		else { $('.autoblock #mini').removeClass('active'); }
		
		
	});