如何獲得圖像的單選按鈕行爲？

我想添加一個圖像到一個單選按鈕，以便當一個按鈕被選中時，所有其他按鈕應該處於非選定模式（就像單選按鈕組的行爲）。如何獲得圖像的單選按鈕行爲？

但我想用圖像來實現它。有什麼辦法呢？

2011-05-16 Eshika

這裏有一些很好的答案，但沒有被接受的答案？ – crmpicco 2012-06-22 09:00:29

如果你不介意的單選按鈕是可見的（這可能是一個好主意，讓用戶明白髮生了什麼事情更容易），這應該這樣做：

<fieldset> 
    <legend>Images</legend> 

    <label for="image_1"> 
     <input id="image_1" name="image" type="radio"> 

     <img> 
    </label> 

    <label for="image_2"> 
     <input id="image_2" name="image" type="radio"> 

     <img> 
    </label> 
</fieldset>

否則，如果你真的只是希望圖像的行爲像單選按鈕一樣，那麼您需要編寫一些使圖像模仿單選按鈕的所有行爲的JavaScript（即將圖像的onclick事件分配給其他事件，以便它們可以與不使用鼠標的用戶的鍵盤）。

您仍然可以包含單選按鈕，但通過CSS隱藏它們，並編寫JavaScript以便在用戶與圖像交互時更改隱藏單選按鈕的狀態。

來源

2011-05-16 09:02:02

但它顯示單選按鈕和圖像both.I希望，而不是按鈕只應該顯示圖像，它應該像收音機group.On選擇一個按鈕上的其他按鈕應取消選擇。 – Eshika 2011-05-16 09:22:24

@Eshika：是的，我確實說過「如果你不介意單選按鈕是可見的」，並解釋了爲什麼這可能是一個好主意。如果你真的只想讓圖像像單選按鈕那樣工作，那麼你需要編寫一些JavaScript來複制單選按鈕的所有行爲，並將其應用到圖像中（例如，使用圖像的onclick事件來記錄選擇圖像，取消選擇所有其他圖像，更新圖像的CSS以某種方式反映該圖像）。儘管如此，我們並不是爲你編寫代碼。 – 2011-05-16 09:33:51

檢查：

<input type="radio" name="group1" value="1" /> 
<input type="radio" name="group1" value="2" />

與其他單選按鈕組：

<input type="radio" name="group2" value="3" /> 
<input type="radio" name="group2" value="4" /> 
<input type="radio" name="group2" value="5" />

來源

2011-05-16 09:02:21

如果你想支持舊的瀏覽器（IE），我認爲你必須與JS來做到這一點。考慮這個HTML：

<img class="radio" src="radio1.jpg" id="radio1"/> 
<img class="radio" src="radio2.jpg" id="radio2"/> 
<img class="radio" src="radio3.jpg" id="radio3"/> 
<img class="radio" src="radio4.jpg" id="radio4"/> 
<img class="radio" src="radio5.jpg" id="radio5"/>

和jQuery：

$(".radio").click(function(){ 
    $("this").addClass("selected").siblings().removeClass("selected") 
})

閱讀選擇的值只得到img.selected的ID。

來源

2011-05-16 10:08:31 Litek

只要確保狀態（選擇與否）在視覺上是可區分的。 – Litek 2011-05-16 10:28:38

如何獲得圖像的單選按鈕行爲？

回答

相關問題