如何製作一個大目標區域的HTML單選按鈕？

enter image description here

當用戶可以點擊按鈕的任何區域，它會選擇單選按鈕。

有什麼建議嗎？

據我所知，單選按鈕是自封閉的，無法環繞其他元素。

，最好的辦法是隻包裹<input>在其<label>，點擊一個標籤也有注重其關聯的輸入效果：

<label> 
    <input name="transfer" type="radio">Bank Deposit 
</label>

沒有JavaScript的要求：演示：http://jsfiddle.net/GTGan/

如果您需要單獨設置標籤文本的樣式，只需將其包裝在<span>中即可。

2011-10-11 14:08:34

有關該解決方案的最好的部分是，它是** **訪問... – zzzzBov

和獎金：你並不需要您的輸入或'for'爲標籤的'id'，它的暗示。 –

-1

你可以使用JavaScript來給它onClick事件實現這種效果，或者你可以只在組合使用jQuery一些圖形用戶界面的插件。我更喜歡這個解決方案來實現跨瀏覽器兼容性。

2011-10-11 14:07:44 chabuya

這可能與HTML標籤很容易地完成。 – brenjt

我不知道標籤解決方案符合w3c標準，但它似乎是，所以使用標籤肯定比使用js更好。 – chabuya

您是否嘗試過使用LABEL標籤？爲了可訪問性，我們應該使用標籤標籤來將標籤關聯到所有的時間。這不僅有助於將屏幕閱讀器捆綁在一起，還可以使標籤以及控件可點擊。

你可以閱讀更多的細節，在這裏找到一個例子： http://webaim.org/techniques/forms/screen_reader#labels

2011-10-11 14:10:12 ph33nyx

我看到韋斯利默奇打我衝，我錯過了LOL – ph33nyx

使用引導，圍繞單選按鈕創建按鈕：

<label class="btn btn-lg btn-default"> 
<input type="radio"> Something 
</label>

2015-08-25 17:29:39

回答