Html 当标签只有一个按钮时，按钮点击不会（完全？）触发标签

我有两个

input

s类型的

radio

。对于每个

输入

都有一个相应的

标签

，里面有一个

按钮

我希望单击按钮会产生与单击标签相同的效果：检查相应的输入

然而，这并没有发生。如下面的代码段所示，悬停并按下按钮确实会触发单选按钮中相应的样式更改，但单击操作不会选择输入，即使简单标签按预期工作

我已经检查了

按钮

s是否是

标签

s的合法子项。允许使用短语内容，按钮也可以，所以那里的一切都应该正常

我还尝试将事件侦听器添加到两个按钮的单击事件中，并在其中调用

event.preventDefault（）

，只是为了确保按钮的默认行为不会阻止事件冒泡到标签上，但没有效果，标签正在接收事件

由于这在不同浏览器中似乎是一致的（在Firefox 41a和Opera 31b/Chrome 44上测试）：

我错过了这里发生的什么事

如何在不耍花招的情况下实现这一点（例如，将标签样式设置为按钮）

一个
一个
两个
两个

标签一次只能与一个表单控件关联。这可以通过以下事实来证明：for

属性指向具有匹配ID属性的元素

您有一个

按钮

，它是您的

标签

的后代；对此的预期解释是，

标签

用作

按钮

的标签。但是，您试图将单选按钮而不是

按钮

元素与

标签

相关联。这里真正的问题是表单控件和

标签之间存在冲突；它无法确定应该与哪个控件关联

我猜单选按钮不能正常工作这是一个副作用。可能是由于单选按钮和
按钮
元素中的某些激活行为

我已经检查了
按钮
s是否是
标签
s的合法子项。标签允许语法内容，按钮是语法内容，所以在那里一切都应该正常

但是，验证程序不会对您的标记产生以下错误：

错误：具有
for
属性的
标签
元素的任何
按钮
后代必须具有与
for
属性匹配的ID值

这是因为具有
for
属性的
label
元素需要具有
for
属性要指向的ID值的表单控件，即使该控件是
label
本身的后代。但不能将同一ID分配给多个元素。结果就是上述冲突

如果你不知道你想在这里完成什么，如果你只是想让

标签

有按钮的外观，我能给你的最好建议就是这样设计它

---

对我来说似乎没问题。@Litestone:你在哪个浏览器中测试这个？按钮不会提交表单吗？那么你为什么要在按钮周围贴标签？@Pete否，因为

type=“button”

属性。我想让按钮切换收音机，这样我就可以隐藏/显示线下更远的

：选中的
选择器的元素。我明白了，这是有意义的。非常感谢你。您知道使用
aria role=“button”
将
按钮切换到
div
是否会引发可访问性工具的相同问题吗？