ラジオボタン内でボタンをクリックできるようにするにはどうすればよいですか？

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を使用することができます。あなたもfor属性を設定する必要があります

button 
 
{ 
 
    pointer-events: none; 
 
}

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

注意を複数の人間入力要素が含まれている場合は、ラベルが正しく機能するようにします。

これはボタンが完全にアクセスできないので、イベントハンドラはそれ以上トリガされません（しかし、これはあなたの望むものと思われます）。

Answer 2

この質問は、this questionの複製です。

answerは、ラベルのマウスイベントをトリガする疑似要素を使用することを推奨しています。

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

JSFiddle of answer。