如何在单选按钮内点击按钮？

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

您可以使用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属性如果它包含多个人类输入元素，它就能正常工作。

另外请注意，这使得按钮完全无法访问，所以任何事件处理程序不会再被触发（但似乎这是你想要的）。

Answer 2

此问题是this question的复制件。

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

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

的answer的jsfiddle。