當選中第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在網頁上顯示的次量可以改變。目前，它顯示四次。

我想要做的是當用戶點擊任何給定的.under-item-description div中的第一個複選框（name =「quantity-1」）時，即 div的.under-compare-price和。低價表示，而低於價格-2和低價-2隱藏。

如果點擊第二個複選框（名稱=「quantity-2」），則會顯示.under-compare-price-2和.under-price-2，而.under-compare-price和.under-price被隱藏，只有在那 .under-item-description div。

這裏是我的JS：

$('.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(); 
    } 
    }); 
}); 

然而，它似乎並沒有發揮作用，因爲我想。無論點擊哪個第二個複選框，我都會在第一個和第三個元素上顯示價格。當第一個複選框被點擊時，它不會切換回去。任何幫助？

Answer 1

環繞在

<fieldset></fieldset> 

單選按鈕的每個選擇這將允許它們獨立工作，然後使用jQuery最接近（）來選擇隱藏的元素。

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