Радио кнопки Оформление
Так все работает, хочу сделать чтобы каждая радио кнопка была со своей картинкой
<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, время: 01:27. |