javascript - Targeting the nth element of certain class when nth checkbox is checked? -
so have dynamically listed set of elements, each structured follows:
<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> the amount of times .under-item-description div shown on page can change. currently, shows 4 times.
what trying when user clicks on first checkbox (name="quantity-1") in given .under-item-description div, that div's .under-compare-price , .under-price shows, while .under-compare-price-2 , .under-price-2 hidden.
if second checkbox (name="quantity-2") clicked, .under-compare-price-2 , .under-price-2 shown while .under-compare-price , .under-price hidden, in that .under-item-description div.
here's 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(); } }); }); however, doesn't seem function want. regardless of second checkbox clicked, have prices appear on 1st , 3rd elements. , doesn't switch when first checkbox clicked anywhere. help?
surround each selection of radio buttons in
<fieldset></fieldset> this allow them work independently, use jquery closest() select elements hide.
Comments
Post a Comment