Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.03.2010, 06:50
Новичок на форуме
Отправить личное сообщение для _alex Посмотреть профиль Найти все сообщения от _alex
 
Регистрация: 12.03.2010
Сообщений: 5

Красивые Radio переключатели не работают =(
Здравствуйте, в ЯваСкрипте я не очень шарю...

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

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



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



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

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

<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");
}
}); 
});
Ответить с цитированием
  #2 (permalink)  
Старый 12.03.2010, 08:18
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

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

Это, если честно, больше на работу которую просят выполнить смахивает. , а не подсказку программист-программисту ...
Ответить с цитированием
  #3 (permalink)  
Старый 12.03.2010, 09:00
Новичок на форуме
Отправить личное сообщение для _alex Посмотреть профиль Найти все сообщения от _alex
 
Регистрация: 12.03.2010
Сообщений: 5

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

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

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

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

P.S. если сам смогу сделать, обязательно напишу здесь.
Ответить с цитированием
  #4 (permalink)  
Старый 12.03.2010, 09:15
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Это просто очень легкая задача, а приведенный Вами код несколько странен для меня. Вот и возникает вопрос - где Вы его взяли?
Ответить с цитированием
  #5 (permalink)  
Старый 12.03.2010, 09:19
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Сообщение от _alex
<input id="Radio1" type="radio" class="RadioMan" name="sex" >
Кажется, Вы про value забыли.
Ответить с цитированием
  #6 (permalink)  
Старый 12.03.2010, 11:07
Новичок на форуме
Отправить личное сообщение для _alex Посмотреть профиль Найти все сообщения от _alex
 
Регистрация: 12.03.2010
Сообщений: 5

Сообщение от micscr Посмотреть сообщение
Это просто очень легкая задача, а приведенный Вами код несколько странен для меня. Вот и возникает вопрос - где Вы его взяли?
Да я знаю что легкая...

код я взял здесь и немного его переделал
Ответить с цитированием
  #7 (permalink)  
Старый 12.03.2010, 12:05
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Сообщение от _alex Посмотреть сообщение
код я взял здесь и немного его переделал
Ладно, уговорили, 2 WMZ.
Ответить с цитированием
  #8 (permalink)  
Старый 12.03.2010, 12:15
Новичок на форуме
Отправить личное сообщение для _alex Посмотреть профиль Найти все сообщения от _alex
 
Регистрация: 12.03.2010
Сообщений: 5

Ладно, уговорили, буду читать мануал.
Ответить с цитированием
  #9 (permalink)  
Старый 12.03.2010, 12:18
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

так бы сразу.
Ответить с цитированием
  #10 (permalink)  
Старый 30.03.2010, 11:34
Новичок на форуме
Отправить личное сообщение для _alex Посмотреть профиль Найти все сообщения от _alex
 
Регистрация: 12.03.2010
Сообщений: 5

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

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;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие полей формы при выборе определенного radio rolph Events/DOM/Window 4 15.06.2010 18:32
Как сделать смену картинки при выборе radio RomanS Элементы интерфейса 1 11.12.2009 00:50
выполнение ф-ии при изменении состояния radio MaxB Events/DOM/Window 5 24.06.2009 14:24
Как узнать value radio button-a из javascript kaaron Общие вопросы Javascript 1 17.02.2009 13:25