如何制作具有大目标区域的HTML单选按钮？

Question

这样的事情：

用户点击按钮的任何区域，然后选择该单选按钮。

有什么建议吗？

据我所知，单选按钮为自闭，不能包裹其他元素。

Answer 1

最好的方法是将<input>包裹在<label>中，因为点击标签也可以关注其相关输入：

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

无需javascript：演示：http://jsfiddle.net/GTGan/

如果您需要单独设置标签文本的样式，只需将其包装在<span>。

中

Answer 2

使用Bootstrap，在radiobuttons周围创建按钮：

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

Answer 3

您是否尝试过使用LABEL标签？为了便于访问，我们应该使用标签标签将标签始终关联到表单控件。这不仅有助于屏幕阅读器将各种事物联系在一起，而且还可以使标签和控件可以点击。

您可以阅读更多详细信息并在此处找到示例： http://webaim.org/techniques/forms/screen_reader#labels

Answer 4

你可以通过给它一个onClick事件来使用javascript来实现这个效果，或者你可以将jQuery与一些gui-plugins结合使用。我更喜欢这种解决方案，以实现跨浏览器的兼容性。