Красивые Radio переключатели не работают =(
 

Здравствуйте, в ЯваСкрипте я не очень шарю...

нужно сделать красивые радио переключатели выбора пола:

когда выбран мужской пол



когда выбран женский



Тут просто при выборе radio меняется фон, но у меня выбираться выбирается, а вот обратно фон не возвращается когда выбираю другой пол, получается как будто они выбраны оба.

Понимаю что нужно что то поправить в Ява скрипте, но что низнаю...:thanks:

<table border='01'>
	<tr>
		<td>
			<input id="Radio1" type="radio" class="RadioMan" name="sex" >
			<label id="Label1" for="Radio1" class="man"></label>
		</td>
		<td>
			<input id="Radio2" type="radio" class="RadioWoman" name="sex"/>
			<label id="Label2" for="Radio2" class="woman"></label> 
		</td>
	</tr>
</table>

CSS:

.RadioMan{
display: none;
}
	.RadioWoman{
display: none;
}
	.man{
background: url("uncheckman.png") no-repeat center;
font-family: tahoma, verdana, "sans-serif";
margin-left: 50px;
width: 50px;
height: 65px;
display: block; 
float: left;
cursor: pointer;
}
	.woman{
background: url("uncheckwoman.png") no-repeat center;
font-family: tahoma, verdana, "sans-serif";
margin-left: 50px;
width: 50px;
height: 65px;
display: block; 
float: left;
cursor: pointer;
}
	.RadioLabelClass:hover{
text-decoration: underline;
cursor: pointer;
}
	.RadioSelectedMan{
background: url("checkman.png") no-repeat center;
}
	.RadioSelectedWoman{
background: url("checkwoman.png") no-repeat center;
}

$(document).ready(function(){
$(".RadioMan").change(function(){
if($(this).is(":checked")){
$(".RadioSelectedMan:not(:checked)").removeClass("RadioSelectedMan");
$(this).next("label").addClass("RadioSelectedMan");
}
});
$(".RadioWoman").change(function(){
if($(this).is(":checked")){
$(".RadioSelectedWoman:not(:checked)").removeClass("RadioSelectedWoman");
$(this).next("label").addClass("RadioSelectedWoman");
}
}); 
});

Понимаю что нужно что то поправить в Ява скрипте, но что низнаю...

Это, если честно, больше на работу которую просят выполнить смахивает. :) , а не подсказку программист-программисту ...

нет работа это когда говорят: "Хочу такую кнопку... чтобы было всё п####о!"

и ничего не понятно что нужно...
А здесь я привел код который низнаю как исправить :(

я считаю что такие переключатели будут полезны не только для меня, их будут использовать и посетители вашего сайта.

P.S. если сам смогу сделать, обязательно напишу здесь.

Это просто очень легкая задача, а приведенный Вами код несколько странен для меня. Вот и возникает вопрос - где Вы его взяли?

Кажется, Вы про value забыли.

Да я знаю что легкая...

код я взял здесь и немного его переделал :)

Ладно, уговорили, 2 WMZ. :)

Ладно, уговорили, буду читать мануал. :agree:

так бы сразу.;)

Низнаю может можно как то проще сделать, вобщем сделал это я так:

javascript:

<script type="text/javascript">
						function manradio() {
							var man = document.getElementById('man')
							var woman = document.getElementById('woman')
							man.style.background='url("/img/checkman.png") no-repeat'
							woman.style.background='url("/img/uncheckwoman.png") no-repeat'
						}
						function womanradio() {
							var man = document.getElementById('man')
							var woman = document.getElementById('woman')
							man.style.background='url("/img/uncheckman.png") no-repeat'
							woman.style.background='url("/img/checkwoman.png") no-repeat'
						}
</script>

HTML:

<label for='radioMan' id='man' onclick="manradio()"></label>
<input type="radio" id='radioMan' class='radio' name="sex" value="1" />

<label for='radioWoman' id='woman' onclick="womanradio()"></label>
<input type="radio" id='radioWoman' class='radio' name="sex" value="0" />

CSS:

.radio{
display: none;
}
	#man{
background: url("/img/uncheckman.png");
margin-left: 58px;
width: 50px;
height: 65px;
}
	#woman{
background: url("/img/uncheckwoman.png") no-repeat;
margin-left: 58px;
width: 50px;
height: 65px;
}