ユーザーフレンドリーなラジオボタンクリック検出

Question

ラジオボタンでフォームを作成しています。ユーザーが何かを変更するたびに更新関数が呼び出されます。

しかし私はこれをユーザーフレンドリーなラジオボタンと組み合わせて問題を抱えています。ここでは、テキストとボタンの周りのボタンゾーンをクリックしやすくしたいと思っています。

ゾーン、テキスト、ボタンの両方のクリックを同時に検出するのに問題があります。 - これまでのところ、MouseEvent.targetとid（私はすべての要素に与えなければならない）のリストを比較するだけで管理しましたが、これは私の頭の中で間違っています。

<div class="buttonZone"> 
    <input type="radio" id="choice1" /> 
    <label for="choice1">Choice 1</label> 
</div> 
<div class="buttonZone"> 
    <input type="radio" id="choice2" /> 
    <label for="choice2">Choice 2</label> 
</div> 

アイデアは非常に高く評価されます。

Answer 1

labelタグに入力テキストとラベルテキストをラップすることができます（これは、for属性を使用して別々の要素にリンクされているからです）、領域全体が入力をトリガーします。

.buttonZone { 
 
    background: #eee; 
 
    border: 1px solid #aaa; 
 
    padding: 2em; 
 
    display: inline-block; 
 
}

<label class="buttonZone"> 
 
    <input type="radio" id="choice1" /> 
 
    <span>Choice 1</span> 
 
</label> 
 
<label class="buttonZone"> 
 
    <input type="radio" id="choice2" /> 
 
    <span>Choice 2</span> 
 
</label>

Answer 2

あなたがボタンに値を与えてみましたがありますか？

<div class="buttonZone"> 
    <input type="radio" id="choice1" value="Choice 1" /> 
</div> 
<div class="buttonZone"> 
    <input type="radio" id="choice2" value="Choice 2" /> 
</div>