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

Question

我有两个inputs类型的radio。对于每个输入都有一个相应的标签，里面有一个按钮。

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

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

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

我还尝试将事件侦听器添加到两个按钮的单击事件中，并在其中调用event.preventDefault（），以确保按钮的默认行为不会阻止事件冒泡到标签，但无济于事，标签正在接收事件。

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

1. 我错过了这里发生的什么事
2. 如何在不耍花招的情况下实现这一点（例如，将标签样式设置为按钮）

<div>
  <input type="radio" name="A" id="one" />
  <label for="one">One</label>
  <label for="one">
    <button type="button">One</button>
  </label>

  <input type="radio" name="A" id="two" />
  <label for="two">Two</label>
  <label for="two">
    <button type="button">Two</button>
  </label>
</div>

Answer 1

>

标签一次只能与一个表单控件关联。这可以通过以下事实来证明：for属性指向具有匹配ID属性的元素。

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

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

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

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

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

这是因为具有for属性的标签元素需要有一个表单控件，该控件的ID值为要指向的for属性，即使该控件是标签 本身。但是不能将相同的ID分配给多个元素。结果就是前面提到的冲突。

如果你不知道你想在这里完成什么，如果你只是想让标签有按钮的外观，我能给你的最好建议就是这样设计它。