Радио бутоните за изображение на Jquery не се превключват

Имам няколко радио бутона, които използват изображения като дисплей на екрана. Нормално състояние, състояние на задържане и щракнато състояние. Изображенията се показват във всяко състояние, но ако щракна върху 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;}

person Romane Vernet    schedule 16.08.2013    source източник
comment
Всички ли имат едно и също свойство/атрибут name? (Трябва, ако са взаимно изключващи се.) Но вие също така не проверявате, за да премахнете класовете, които добавяте, което подозирам, че е действителният проблем.   -  person David says reinstate Monica    schedule 17.08.2013
comment
опитайте да промените if($(this).is(:checked)) на if($(this).val(:checked))   -  person Nilzone-    schedule 17.08.2013
comment
nilzone - не работи.   -  person Romane Vernet    schedule 17.08.2013
comment
какво имаш предвид Дейвид? Имате предвид име=адрес. Ако е така, за този случай тогава да.   -  person Romane Vernet    schedule 17.08.2013


Отговори (1)


Трябва да изчистите всички маркирани класове, преди да добавите нов във вашия Jquery код. PS: Променете селектора според вашата йерархия, така че да получава всички радиостанции в групата.

$(".image_radiobtn input[type='radio']").change(function(){
    $('selector').removeClass('checked');
    if($(this).is(":checked")){
       $(this).next("label").removeClass('hover').addClass('checked');          
    }
    else{
       $(this).next("label").removeClass('checked');
    }
});
person madagalbiati    schedule 16.08.2013
comment
madaaah - искаш да кажеш да промениш селектора на id или class, който е в html за div или ul? просто уморих вашия код и той не работи за мен. Предполагам, че е защото не съм променил селектора. - person Romane Vernet; 17.08.2013
comment
Искам да кажа, използвайте селектор, който получава ВСИЧКИ ваши радио бутони, които са от една и съща група... Например, ако всички те са вътре в тази ul, опитайте $('#radiobtn-toggle-view input[type='radio' ]').removeClass('проверено'); - person madagalbiati; 17.08.2013
comment
Но разбира се, премахнете класа от същото място, където го добавяте. - person madagalbiati; 17.08.2013
comment
Пробвах това и не ми се получи. $(.image_radiobtn input[type='radio']).change(function(){ $('#radiobtn-toggle-view input[type='radio']').removeClass('checked'); if($ (this).is(:отметнато)){ $(this).next(label).removeClass('hover').addClass('checked'); } else{ $(this).next(label).removeClass( 'отметнато'); } }); - person Romane Vernet; 17.08.2013
comment
Може би не го казах достатъчно ясно. Когато се щракне върху радио бутоните, те работят. Те показват щракнати, но ако щракна върху другия, той също остава щракнат, вместо да премахна отметката от първия бутон за избор. - person Romane Vernet; 17.08.2013
comment
Някой знае ли защо и двата бутона за избор остават щракнати, вместо да бъдат или или? - person Romane Vernet; 18.08.2013