当选中第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 item-description div可更改的次数。目前，它显示了四次。

我要做的是，当用户在任何给定的..under item description div中单击第一个复选框(name="quantity-1")时，该div的..under比较-价格和..under价格显示，而..under比较-价格-2和..under价格-2是隐藏的。

如果单击第二个复选框(name="quantity-2")，则会显示..under比较-price-2和..under price-2，而..under比较-价格和..under价格则隐藏在..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();
    }
  });
});

然而，它似乎没有发挥我想要的作用。无论单击哪个第二个复选框，我都会在第1和第3元素上显示价格。当第一个复选框在任何地方被点击时，它都不会切换回来。有什么帮助吗？

Answer 1

将每个选择的单选按钮包围在

<fieldset></fieldset>

这将允许它们独立工作，然后使用jQuery最近()来选择要隐藏的元素。

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