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

Question

我有两个类型为input的{​​{1}}。对于每个radio，内部都有input个label。

我希望点击按钮与点击标签具有相同的效果：将检查相应的输入。

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

我已检查button是button的合法子女。 Labels允许短语内容，按钮为Phrasing Content，所以一切都应该没问题。

我还尝试为两个按钮的点击事件添加一个事件监听器，并在其中调用label，只是为了确保按钮的默认行为不会阻止事件冒泡到标签，但无济于事，标签正在接收活动。

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

1. 我在这里发生了什么事？
2. 如何在没有欺骗的情况下实现此功能（例如将标签样式设置为按钮）？

event.preventDefault()

Answer 1

1. label一次只能与一个表单控件相关联。事实证明，for属性指向具有匹配ID属性的元素。

   您有button，是您label的后代;对此的预期解释是label用作button的标签。但是，您尝试将单选按钮而不是button元素与label相关联。这里真正的问题是表单控件和label之间存在冲突;它无法确定应该与哪个控件相关联。

   我猜测单选按钮工作不正常的事实是这样的副作用。也许这取决于单选按钮和button元素中的某些激活行为。

     

   我已检查button是label的合法子女。标签允许短语内容，按钮是短语内容，所以一切都应该没问题。

   验证器确实会对您的标记产生以下错误：

     

   错误：具有button属性的label元素的任何for后代必须具有与for属性匹配的ID值。

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

2. 如果你不知道自己要在这里完成什么，如果你只想让label看起来像按钮一样，那么我给出的最佳建议就是如此设计它。