最も近いラジオボタンセットの値を見つける

Question

ラジオボタンが複数あり、同じグループ内のラジオボタンの値を動的に見つけるために.find()関数を使用しようとしています。

ただし、未定義のまま返されます。

<fieldset> 
    <div id="border1"> 
    <input id="radio1a" type="radio" id="set1" class="animals radio" value="Zebra"> 
    <input id="radio1b" type="radio" id="set1" class="animals radio" value="Lion"> 
    </div> 
    <div id="border2"> 
    <input id="radio2a" type="radio" id="set2" class="fruit" value="Oranges"> 
    <input id="radio2b" type="radio" id="set2" class="fruit" value="Grapes"> 
    </div> 
</fieldset> 

<fieldset> 
    <div class="border1"> 
    <input id="radio3a" type="radio" id="set3" class="animals radio" value="Monkey"> 
    <input id="radio3b" type="radio" id="set3" class="animals radio" value="Parrot"> 
    </div> 
    <div class="border2"> 
    <input id="radio4a" type="radio" id="set4" class="fruit radio" value="Bananas"> 
    <input id="radio4b" type="radio" id="set4" class="fruit radio" value="Cherries"> 
    </div> 
</fieldset> 

（。。申し訳ありませんが、同じIDを置くことを意味するものではありませんでしたコピー/貼り付けました）

私は動的な値を見つけるためにjqueryのを使用しようとしている：

$(".animals .radio").change(function() 
{ 
    alert($(this).closest('fieldset').find('.fruit').val()); 
    etc. 
} 

しかし、それはまた試してみましたundefined

を返す保つ：

$(this).closest('fieldset').find('.fruit:checked').val() 

私はこれに近づくべき別の方法がありますか？ ラジオボタンのすべてのセットに対してコードを書く必要はありません。

Answer 1

.animals.radioではなく、.animals .radioである必要があります。

1. .animals.radioは、これらの2つのクラスが同じ要素に属することを意味します。 （あなたの場合はこれが正しい）

2. .animals .radioを意味する.animalsは.radioの祖先です。

   $(".animals.radio").change(function() { 
   
       alert($(this).closest('fieldset').find('.fruit').val()); 
   
   }); 
   

AND ONE THINK、あなたのコードは、DUPLICATE IDSを持って、それを避けます。

Answer 2

$(".animals .radio")は、お探しのクエリではありません。$(".animals.radio")（クラス間に空白はありません）。

$(".animals .radio")クラス "animals"を持つ要素の中で、クラス "radio"を持つ要素を探します。

Answer 3

$(".animals .radio")は、クラスの動物を持つ両親を持つクラスラジオのすべての要素を取得しています。

あなたは二回id=""を使用して、スターターのためにこれらの入力にtype="radio"を設定しないことについてどのように$(".animals.radio")

Answer 4

のようなものであるクラスの動物やラジオの両方を持つ要素を、したいですか？ 複数の要素に同じIDを使用している場合は、停止しますか？

それはおそらく次のようになります。

<fieldset> 


<div id="border1"> 
     <input type="radio" id="radio1a" name="set1" class="animals radio" value="Zebra" /> 
     <input type="radio" id="radio1b" name="set1" class="animals radio" value="Lion" /> 
    </div> 
    <div id="border2"> 
     <input type="radio" id="radio1c" name="set2" class="fruit" value="Oranges" /> 
     <input type="radio" id="radio1d" name="set2" class="fruit" value="Grapes" /> 
    </div> 
</fieldset> 

<fieldset> 
    <div class="border1"> 
     <input type="radio" id="radio2a" name="set3" class="animals radio" value="Monkey" /> 
     <input type="radio" id="radio2b" name="set3" class="animals radio" value="Parrot" /> 
    </div> 
    <div class="border2"> 
     <input type="radio" id="radio2c" name="set4" class="fruit radio" value="Bananas" /> 
     <input type="radio" id="radio2d" name="set4" class="fruit radio" value="Cherries" /> 
    </div> 
</fieldset>​​​​​​​​​​ 

両方の値を取得するには、次の答えを

$('input[type="radio"]').on('change', function() { 
    var elm = $(this).closest('fieldset').find('.fruit').filter(':checked'); 
    alert(elm.value); 
}​);​