Html 如何将标签与单选按钮相关联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/658689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to associate labels with radio buttons
提问by gfrizzle
I'm using MVC, and I've got a simple radio button setup:
我正在使用 MVC，我有一个简单的单选按钮设置：
<%=Html.RadioButton("my_flag", True)%><label>Yes</label>
<%=Html.RadioButton("my_flag", False)%><label>No</label>
The only thing I'm missing is that you can't click the label to select the radio button. Normally you'd use:
我唯一缺少的是您无法单击标签来选择单选按钮。通常你会使用：
<label for="my_flag">
but that associates both labels with the last radio button. Is there any way to associate the labels with the correct radio button?
但这将两个标签与最后一个单选按钮相关联。有没有办法将标签与正确的单选按钮相关联？
Note: This is mimicking a paper form, so switching to a checkbox is not an option.
注意：这是模仿纸质表单，因此无法切换到复选框。
采纳答案by Chad Birch
You need to give the two radio buttons the same name(so that they're in the same group), but different ids(so that you can associate the label with each one individually). I'm not familiar with ASP.NET MVC, so I don't know how to actually accomplish this, but that's the solution.
您需要为这两个单选按钮指定相同的名称（以便它们在同一组中），但具有不同的ID（以便您可以将标签与每个按钮单独关联）。我不熟悉 ASP.NET MVC，所以我不知道如何实际实现这一点，但这就是解决方案。
Edit: a second possibility is to wrap the radio buttons inside the label tag, like so:
编辑：第二种可能性是将单选按钮包裹在标签标签内，如下所示：
<label><%=Html.RadioButton("my_flag", True)%>Yes</label>
<label><%=Html.RadioButton("my_flag", False)%>No</label>
* Note that this way may actually have better browser compatibility, I know some browsers are still iffy about the name/id distinction
* 请注意，这种方式实际上可能具有更好的浏览器兼容性，我知道有些浏览器对 name/id 的区别仍然不确定
回答by Troels Thomsen
You have two different ways to implement this.
您有两种不同的方法来实现这一点。
The first one is the simple solution is to embed the radio button inside a <label/>tag.
第一个是简单的解决方案是将单选按钮嵌入<label/>标签内。
<p>
<label><%=Html.RadioButton("option", "yes") %> Yes</label>
</p>
<p>
<label><%=Html.RadioButton("option", "no") %> No</label>
</p>
The second path is to associate each radio button with an ID. This is also quite simple with the htmlAttributesargument and it allows for more flexibility in regard to the form layout:
第二条路径是将每个单选按钮与一个 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>
I would recommend the latter, and it seems to be the one you are asking for too.
我会推荐后者，它似乎也是你所要求的。
EDIT
编辑
In fact you should give the argument with the ID attribute no matter what. If you don't do this, your site will have multiple elements with the same ID, and this fails HTML validation.
事实上，无论如何你都应该给出带有 ID 属性的参数。如果您不这样做，您的站点将有多个具有相同 ID 的元素，这将无法通过 HTML 验证。
回答by Alekc
I'm not an asp programmer, so sorry if i'll tell something off :P
我不是 asp 程序员，很抱歉，如果我会说些什么：P
Label's attribute for is referenced to input's id. So you will have to do something like
标签的属性 for 被引用到输入的 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>
回答by intrepidis
You can do it like this: (This is using Razor, but it's easy to translate.)
你可以这样做：（这是使用 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>
Basically you manually specify the idattribute for the radio buttons.
基本上，您手动指定id单选按钮的属性。
