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

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

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

是
不

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

<label for="my_flag">

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

---

注意：这是模仿纸质表单，因此切换到复选框不是一个选项。

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

编辑：第二种可能是将单选按钮包装在标签标签内，如下所示：

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

是
不

---

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

我不是asp程序员，因此如果我要说点什么，请原谅：p

的标签属性被引用到输入的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>

Rad1
Rad2

实现这一点有两种不同的方法

第一个简单的解决方案是将单选按钮嵌入

标记中

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

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

我会推荐后者，而且它似乎也是你想要的

编辑

事实上，无论发生什么情况，都应该使用ID属性给出参数。如果您不这样做，您的站点将有多个具有相同ID的元素，并且无法通过HTML验证。

您可以这样做：（这是使用Razor，但很容易翻译。）

@Html.RadioButtonFor（model=>model.MyValue，true，new{id=“MyValue\u true”}）
是的，这是真的
@RadioButtonOn（model=>model.MyValue，false，新的{id=“MyValue\u false”}）
不，这是假的

---

基本上，您可以手动指定单选按钮的

id

属性。

即使使用已接受的答案，您也需要覆盖id，如我的答案中的示例所示。如果您不这样做，您的HTML将无法通过验证，因为存在两个具有相同ID的元素。我担心此解决方案会在ID不明确的地方生成无效的HTML。正如我所说，我对ASP.NET MVC一无所知，我不知道第一个参数是定义id还是name属性。同时定义id和名称。这与508不兼容。标签按钮必须使用for=“idOfElement”来通过html5验证和美国政府508合规性。参见下面Troles的解决方案是：+1我喜欢第一种方式。这里不需要给每个单选按钮一个ID。但是这个跨浏览器兼容吗。。？？

<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>

@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>