如何将标签元素与单选按钮相关联[重复]答案

【问题标题】：How to associate label elements with radio buttons [duplicate]如何将标签元素与单选按钮相关联[重复]
【发布时间】：2012-03-03 11:12:31
【问题描述】：

我的表单中有一些选项按钮，我总是需要准确地单击圆形选项按钮来选择它。有没有办法让用户点击相关的标签来选择选项按钮？

<p>
    <span class="editor-label">
        @Html.LabelFor(m => m.ADR)
    </span>
    <span class="editor-field">
        @Html.RadioButtonFor(model => model.ADR, "Yes", AdrYesOptions) 
        @UserResource.YesValue
        @Html.RadioButtonFor(model => model.ADR, "No", AdrNoOptions) 
        @UserResource.NoValue 

    </span>
</p>

我在这里找到了一些解决方案：How to associate labels with radio buttons，但这些不适合我，因为我更喜欢特定于 MVC 的解决方案。

【问题讨论】：

你说的特定于MVC是什么意思？链接的问题包含一个有效的答案（尽管不是被接受的答案），展示了如何实现这一目标。
我的意思是（如果可能的话）保留我的代码 Html.LabelFor... Html.RadioButtonFor... 而不是 ...

标签： asp.net asp.net-mvc

【解决方案1】：

将每个单选按钮和相关的标签文本包装在 <label> 元素中：

<p>
    <span class="editor-label"> @Html.LabelFor(m => m.ADR) </span>
    <span class="editor-field">
        <label> @Html.RadioButtonFor(model => model.ADR, "Yes", AdrYesOptions) @UserResource.YesValue </label>
        <label> @Html.RadioButtonFor(model => model.ADR, "No", AdrNoOptions) @UserResource.NoValue </label>
    </span>   
</p>

【讨论】：

请注意，如果用户点击主标签@Html.LabelFor(m => m.ADR)，这将选择第一个单选选项。