n番目のチェックボックスをオンにしたときに特定のクラスのn番目の要素を対象にしていますか？

Question

だから私は、次のようにそれぞれが構成され、要素の動的にリストされているセットを持っている：

<div class="under-item-description"> 
    <span class="under-compare-price">100</span><span class="under-price">50</span> 
    <span class="under-compare-price-2">200</span><span class="under-price-2">100</span> 
    <div class="under-quantity"> 
     <label class="under-quantity-button"> 
     <input type="radio" checked="checked" name="quantity-1" class="under-quantity-radio" value="1"/> 
     </label> 
     <label class="under-quantity-button"> 
     <input type="radio" name="quantity-2" class="under-quantity-radio" value="2"/> 
     </label> 
    </div> 
</div> 

.under-項目の説明のdivがページに示されている時間の量を変更することができます。現在、4回表示されています。

私がしようとしているのは、指定された.under-item-description div、の最初のチェックボックス（name = "quantity-1"）をクリックしたときです。 divの.under-compare-price .under-price-2と.under-price-2は隠されている。

2番目のチェックボックス（name = "quantity-2"）をクリックすると、.under-compare-price-2と.under-price-2が表示されます。隠しているのは、その .under-item-description div。

$('.under-quantity-button').click(function(){ 
    $('.under-quantity-radio').each(function(){ 
    if($(this).is(':checked')){ 
     $('.under-compare-price:eq('+$(this).parents('.under-item-description').index()+'), .under-price:eq('+$(this).parents('.under-item-description').index()+')').show(); 
     $('.under-compare-price-2:eq('+$(this).parents('.under-item-description').index()+'), .under-price-2:eq('+$(this).parents('.under-item-description').index()+')').show(); 
    } 
    }); 
}); 

しかし、私が望むように機能していないようです：

は、ここに私のJSです。どちらのチェックボックスをクリックしても、第1および第3要素に価格が表示されます。そして、最初のチェックボックスがクリックされたときには元の状態に戻りません。どんな助け？

<fieldset></fieldset> 

で

Answer 1

サラウンドラジオボタンの各選択は、これは、次いで、非表示にする要素を選択するjQueryの最も近い（）を使用し、それらは独立して動作することを可能にします。

https://api.jquery.com/closest/