Радио кнопки Оформление
Так все работает, хочу сделать чтобы каждая радио кнопка была со своей картинкой
<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> Но так не работает :( Подскажите в почему ? |
а вот в чем проблема
$(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>
|
Делаю так все равно не работает
<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>
|
| Часовой пояс GMT +3, время: 05:34. |