Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.09.2011, 16:51
Аватар для Sadist_dead
Профессор
Отправить личное сообщение для Sadist_dead Посмотреть профиль Найти все сообщения от Sadist_dead
 
Регистрация: 08.08.2011
Сообщений: 191

Радио кнопки Оформление
Так все работает, хочу сделать чтобы каждая радио кнопка была со своей картинкой

<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>


<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>


И соответственно
делаю так:
дублирую стиль

<style>
.CheckBoxClass2,.RadioClass2{
		display: none;
	}
	.CheckBoxLabelClass2{
		background: url("img/UnCheck2.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 35px;	
		width: 81px;
		display: block;
	}
	.CheckBoxLabelClass2:hover, .RadioLabelClass:hover{
		text-decoration: underline;
	}
	.LabelSelected{
		background: url("img/Check2.png") no-repeat;
	}
	.RadioLabelClass2{
		background: url("img/UnCheck2.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 35px;	
		width: 81px;
		display: block;	
		float: left;
	}
	.RadioSelected2{
		background: url("img/Check2.png") no-repeat;
	}
		
</style>

Меняю класс

<input id="Radio2" class="RadioClass2" name="group1" type="radio">

	<label id="Label2" for="Radio2" class="RadioLabelClass2"></label>


Но так не работает
Подскажите в почему ?

Последний раз редактировалось Sadist_dead, 13.09.2011 в 16:55.
Ответить с цитированием
  #2 (permalink)  
Старый 13.09.2011, 17:00
Аватар для Sadist_dead
Профессор
Отправить личное сообщение для Sadist_dead Посмотреть профиль Найти все сообщения от Sadist_dead
 
Регистрация: 08.08.2011
Сообщений: 191

а вот в чем проблема
$(document).ready(function(){
	$(".CheckBoxClass").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").addClass("LabelSelected");
		}else{
			$(this).next("label").removeClass("LabelSelected");
		}
	});
	$(".RadioClass").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
			$(this).next("label").addClass("RadioSelected");
		}
	});	
});
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 13.09.2011, 17:05
Аватар для Sadist_dead
Профессор
Отправить личное сообщение для Sadist_dead Посмотреть профиль Найти все сообщения от Sadist_dead
 
Регистрация: 08.08.2011
Сообщений: 191

Делаю так все равно не работает

<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>
<script type="text/javascript">
$(document).ready(function(){
	
	$(".RadioClass2").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected2:not(:checked)").removeClass("RadioSelected2");
			$(this).next("label").addClass("RadioSelected2");
		}
	});	
});
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение ссылки на объект в обработчике нажатия кнопки pauluss ExtJS 1 22.06.2011 15:27
как изменить масштаб кнопки Taurus1195 Общие вопросы Javascript 12 19.05.2011 18:24
заменяю один текст другим через прозрачность. кнопки конфликтуют. plishas Events/DOM/Window 7 12.01.2011 21:34
Выбрать радио кнопку по имени Kolyy jQuery 2 01.02.2010 23:10
Проблема с меню для кнопки в Гриде progi2007 ExtJS 0 03.08.2009 14:16