javascript - ラジオボタンのクリックイベントの動作が異なる理由

Question

質問は：

最初のクリックがラジオボタン上にある場合、通常どおり動作します。しかし、最初のクリックがスパンテキスト (つまり aaaa) である場合、チェックされたラジオを取得できません。

なぜ同じにすることができるのか教えてください。

score 2 · Accepted Answer

このコードは、ラジオボタンがクリックされたときに発生します。

var obj = $(e.target||e.srcElement).parent();
score = obj.find('input:checked').val();

親をobj、含まれる DIV である変数に入れます。これには両方のラジオボタンが含まれます。次に、その DIV で最初にチェックされた入力要素を見つけます。これは、チェック後に常に「最初の」値を持つ要素です。

クリックされたアイテムの値を取得するだけです。

score = $(e.target||e.srcElement).val();

これは次のように書き直すことができます。

score = $(this).val();

score 1 · Accepted Answer

新しいフィドルを参照してください。

問題は次の行です。

score = obj.find('input:checked').val();

次のように変更します。

score = $(this).val();

この理由は、div で選択されたアイテムを探しているが、最初のクリックではアイテムがまだ選択されていないためです。イベントがラジオボタンを対象としていることを考えると、ラジオが選択されていると見なすことができます。

を使用する必要がないことにも注意してくださいe.target||e.srcElement。jQuery がこれを処理します。$(this)代わりに使用してください。

さらに、ラジオボタンに名前を設定して、両方が選択されないようにする必要があります。または、両方を選択することが望ましい動作である場合は、代わりにチェックボックスを使用します。

score 0 · Accepted Answer

event次のプロパティを使用する必要はありません。

var score = $(this).val(); // in your '.x' click handler

$('.y').click(function(e) {
    $(this).prev('.x').click();
});

score -1 · Accepted Answer

このようにラベルタグ内にラジオボタンをラップするだけです

<label for="radio1">
   <input type=radio class="x" id="radio1" value="First"/>
   <span class="y">aaaa</span>
</label>

追加の jquery や javascript は不要

ここでデモをチェック

javascript - ラジオ ボタンのクリック イベントの動作が異なる理由