如何在單選按鈕內點擊按鈕？

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。