如何将标签与单选button相关联

我正在使用MVC,我有一个简单的单选button设置:

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

我唯一遗漏的是你不能点击标签来select单选button。 通常你会使用:

 <label for="my_flag"> 

但是将这两个标签与最后一个单选button相关联。 有什么办法将标签与正确的单选button相关联吗?

注意:这是模仿纸张forms,所以切换到checkbox不是一个选项。

4 Solutions collect form web for “如何将标签与单选button相关联”

您需要给两个单选button命名 (以便它们在同一组中),但是不同的ID (以便您可以将标签与每个单独关联)。 我不熟悉ASP.NET MVC,所以我不知道如何实现这一点,但这是解决scheme。

编辑:第二种可能性是将单选button包裹在标签标签内,如下所示:

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

*请注意,这种方式可能实际上有更好的浏览器兼容性,我知道一些浏览器仍然如果名称/ ID的区别

你有两种不同的方式来实现这一点。

第一个简单的解决scheme是将单选buttonembedded到<label/>标签中。

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

第二个path是将每个单选button与一个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的元素,并且这未通过HTMLvalidation。

我不是一个asp程序员,所以对不起,我会告诉一些事情:P

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

你可以这样做:(这是使用剃刀,但很容易翻译。)

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

基本上你手动指定单选button的id属性。

  • 使用Google App脚本将多个file upload到Google云端硬盘
  • CSS水平表单元格间距:怎么样?
  • 如何更改textarea的边框颜色:focus
  • 为什么flexbox拉伸我的形象?
  • 刷新其中包含Google广告的Div
  • 调用wkhtmltopdf从HTML生成PDF
  • IFrame(HTML)是否过时?
  • HTML表格到Excel的Javascript