Question

我正在使用MVC，我有一个简单的单选按钮设置：

<%=Html.RadioButton("my_flag", True)%><label>Yes</label>
<%=Html.RadioButton("my_flag", False)%><label>No</label>

我唯一缺少的是你无法点击标签来选择单选按钮。通常你会使用：

<label for="my_flag">

但是将两个标签与最后一个单选按钮相关联。有没有办法将标签与正确的单选按钮相关联？

注意：这是模仿纸质表格，因此切换到复选框不是一种选择。

Answer 1

您有两种不同的方式来实现它。

第一个是简单的解决方案是将单选按钮嵌入<label/>标记内。

<p>
    <label><%=Html.RadioButton("option", "yes") %> Yes</label>
</p>

<p>
    <label><%=Html.RadioButton("option", "no") %> No</label>
</p>

第二条路径是将每个单选按钮与ID相关联。使用htmlAttributes参数也很简单，它允许在表单布局方面提供更多灵活性：

<p>
    <label for="option_yes">Yes:</label>
    <%=Html.RadioButton("option", "yes", new { id = "option_yes" }) %>
</p>

<p>
    <label for="option_no">Np:</label>
    <%=Html.RadioButton("option", "no", new { id = "option_no" }) %>
</p>

我会推荐后者，它似乎也是你要求的那个。

修改

实际上你应该给出带有ID属性的参数，无论如何。如果不这样做，您的站点将具有多个具有相同ID的元素，这将导致HTML验证失败。

Answer 2

您需要为两个单选按钮指定相同的名称（以便它们位于同一组中），但不同的 ID （以便您可以关联每个标签单独标记）。我不熟悉ASP.NET MVC，所以我不知道如何实现这一点，但这就是解决方案。

编辑：第二种可能性是将标签标签中的单选按钮包裹起来，如下所示：

<label><%=Html.RadioButton("my_flag", True)%>Yes</label>
<label><%=Html.RadioButton("my_flag", False)%>No</label>

*请注意，这种方式实际上可能具有更好的浏览器兼容性，我知道有些浏览器仍然不清楚名称/ ID的区别

Answer 3

我不是一名asp程序员，很抱歉，如果我能说些什么：P

Label的属性为引用输入的id。所以你必须做类似

的事情

<input type="radio" name="rad1" id="rad1_1"><label for="rad1_1">Rad1</label>
<input type="radio" name="rad1" id="rad1_2"><label for="rad1_2">Rad2</label>

Answer 4

你可以这样做:(这是使用Razor，但它很容易翻译。）

@Html.RadioButtonFor(model => model.MyValue, true, new { id = "MyValue_True" })
<label for="MyValue_True">Yes, this is true</label>

@Html.RadioButtonFor(model => model.MyValue, false, new { id = "MyValue_False" })
<label for="MyValue_False">No, this is false</label>

基本上，您手动为单选按钮指定id属性。

如何将标签与单选按钮相关联

4 个答案: