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

Question

我有两个类型为radio的input。对于每个input，都有一个相应的带有单个button的label。

我期望点击按钮与点击标签具有相同的效果：相应的输入将被选中。

然而，这并没有发生。如下代码片段所示，悬停和按下按钮确实会触发单选按钮中相应的样式更改，但单击操作不会选择输入，尽管简单的标签可以正常使用。

我已检查过button是label的合法子元素。 标签允许短语内容，而按钮是短语内容，因此一切都应该没问题。

我还尝试为两个按钮的点击事件添加事件侦听器，并在其中调用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>

- Daniel

---

对我来说看起来没问题。 - Litestone

@Litestone：你在用什么浏览器测试这个？ - BoltClock

按钮不是无论如何都会提交表单吗？那么为什么你还想在按钮周围加标签呢？ - Pete

@Pete 不行，因为有 type="button" 属性。我想让按钮切换单选框，这样我就可以在后面使用 :checked 选择器来隐藏/显示元素。 - Daniel

Answer 1

1. label只能与一个表单控件相关联，这是因为for属性指向具有相匹配ID属性的元素。

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

   我猜单选按钮不能正确工作可能是这个原因的副作用。也许这与单选按钮和button元素中的某些激活行为有关。

   我已检查过button可作为label的合法子级。标签允许Phrasing Content，而按钮是Phrasing Content，所以一切都应该没问题。

   然而，验证器会产生以下错误：

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

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

2. 如果您在这里尝试完成什么，而不知道具体目标是什么，我能给出的最好建议是，如果您只想让看起来像一个按钮，那么就将其样式设置为。

- BoltClock

---

我明白了，非常感谢。您知道将“button”切换为带有“aria-role =” button“的“div”是否会触发辅助工具的相同问题吗？ - Daniel

Answer 2

<div>
  <input type="radio" name="A" id="one" />
  <label for="one">One</label>
  <label for="one">
    <span style="color: red;">One</span>
  </label>

  <input type="radio" name="A" id="two" />
  <label for="two">Two</label>
  <label for="two">
    <span style="color: blue;">Two</span>
  </label>
</div>

- Nguyễn Thanh Hòa