Имам няколко радио бутона, които използват изображения като дисплей на екрана. Нормално състояние, състояние на задържане и щракнато състояние. Изображенията се показват във всяко състояние, но ако щракна върху 2 бутона за избор, и двата остават щракнати. Как мога да има или или при щракване.
Ето jquery:
$(".image_radiobtn input[type='radio']").change(function(){
if($(this).is(":checked")){
$(this).next("label").removeClass('hover').addClass('checked');
}
else{
$(this).next("label").removeClass('checked');
}
});
Ето html:
<ul id="radiobtn-toggle-view" class="image_radiobtn">
<li>
<input id="input-1" type="radio" name="address" value="1" />
<label for="input-1">Use this address.</label>
</li>
</ul>
Ето го css:
#radiobtn-toggle-view, #radiobtn-toggle-view2 {
list-style: none;
margin: 0;
position: relative;
cursor: pointer;
}
#radiobtn-toggle-view li, #radiobtn-toggle-view2 li{
min-height: 15px;
height: 15px;
margin:0;
padding: 10px 0;
}
#radiobtn-toggle-view label, #radiobtn-toggle-view2 label {
cursor: pointer;
font-size: 14px;
font-weight: bold;
height: 15px;
line-height: 15px;
margin: 0;
text-decoration: none;
}
.image_radiobtn li input[type='radio']{
display:none;
}
.image_radiobtn li label {
background: url(/images/icons/grey_radio_btn.png) no-repeat;
padding-left: 20px;
}
.image_radiobtn li label:hover {
background: url(/images/icons/e_radio_btn.png) no-repeat;
}
.image_radiobtn li label.checked {
background: url(/images/icons/g_radio_btn.png) no-repeat;
}
.hidden {display: none;}
name
? (Трябва, ако са взаимно изключващи се.) Но вие също така не проверявате, за да премахнете класовете, които добавяте, което подозирам, че е действителният проблем. - person David says reinstate Monica   schedule 17.08.2013