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

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单选按钮的属性.