jquery圖像單選按鈕不切換

我有幾個單選按鈕，使用圖像作爲屏幕上的顯示。常規狀態，懸停狀態和點擊狀態。圖像顯示在每個狀態，但如果我點擊2個單選按鈕，兩個都保持點擊。我怎樣才能讓它成爲或單擊時。jquery圖像單選按鈕不切換

這裏是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;}

來源

2013-08-16 Romane Vernet

它們都具有相同的'name'屬性/屬性嗎？（如果它們是互斥的，它們應該是這樣）。但是你也沒有檢查刪除你添加的類，我懷疑這是實際的問題。 –

嘗試將if（$（this）.is（「：checked」））更改爲if（$（this）.val（「：checked」）） –

nilzone - 沒有工作。 –

你需要清除所有添加前檢查班新的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'); 
    } 
});

來源

2013-08-16 20:29:46 madagalbiati

madaaah - 你的意思是將選擇器更改爲div或ul的html中的id或class？我只是厭倦了你的代碼，它並不適合我。我猜測這是因爲我沒有改變選擇器。 –

我的意思是，使用一個選擇器來獲取所有同一組的單選按鈕...例如，如果它們都在該ul的內部，請嘗試$（'＃radiobtn-toggle-view input [type ='radio ']'）removeClass（ '檢查'）; – madagalbiati

但是，當然，從你添加它的地方刪除課程。 – madagalbiati

jquery圖像單選按鈕不切換

回答

相關問題