如何在单选按钮中单击按钮？

Question

据我所知，我可以在收音机旁边点击一个可点击的文字按钮，这样点击文字即可切换单选按钮。

<label>
    Click me
    <input type="radio" value="selected"><br>
</label>

我想要一个按钮作为我的标签，但是当我这样做时，单击按钮时单选按钮不会切换。

<label>
    <button type="button">Click</button>
    <input type="radio" value="selected"><br>
</label>

单击时如何使按钮标签切换单选按钮？

我想这样做，因为我有一些代码使用包含样式图像的按钮，我想将其更改为使用下面的单选按钮并保留现有按钮。

Answer 1

此问题与this question重复。

answer建议使用一个伪元素来触发标签的鼠标事件。

label:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

answer的JSFiddle。

Answer 2

你可以使用CSS'pointer-events让鼠标事件“掉落”按钮并进入标签：

button
{
    pointer-events: none;
}

<label for="target">
    <button type="button">Click</button>
    <input id="target" type="radio" value="selected"><br>
</label>

请注意，如果标签包含多个人工输入元素，您还必须设置标签的for属性才能正常工作。

另请注意，这会使按钮完全无法访问，因此任何事件处理程序都不会被触发（但似乎这就是您想要的）。