如何将标签与单选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属性。

  • 在FORM中使用DIV是否正确?
  • 为Internet Explorerinput占位符
  • 用jQuerydynamic添加行
  • networking上的math方程
  • 当用户界面可以通过CSS,HTML,JavaScript,jQuery实现时,JSF有什么需要?
  • 将一个未知大小的大图像放在一个较小的div中,并将其隐藏起来
  • 如何在Firefox 3中从HTMLinput表单获取文件path
  • 用htmlbutton运行一个shell脚本
  • 在CSS FlexBox布局中自动调整图像大小并保持纵横比?
  • 如何检测何时取消文件input点击?
  • 哪些html标签支持onload / onerror javascript事件属性?