Question

I’ve been trying to make a ul controlled by radio buttons. When a button is checked, I would like all li’s, except the final (other) li and the li containing the checked radio button to disappear. I think I am quite close but I can’t work out how to exclude the checked radio button’s li from being hidden. My guess is that the .not(this).parent(‘li’) section isn’t targetting the correct element, but I can’t work out what it should be instead. Here is the javascript I’ve made so far.

$('input.addressradio').change(function(){ 
  $(this).parents('ul.address').find('li').not(this).parent("li").hide();   
  $(this).parents('ul.address').find('li.allbutonetarget').show();
    return false;
}); 

And here is the html I would like it to power.

<ul class="address collectionaddressnewhideY">
<li>
<input value="saved1" type="radio" class="include oneofmanyfieldset addressradio" name="collectionaddressradio" id="collectionaddressradiosaved1"></input>
<span class="collectionaddresssaved1 savedaddress">
</span>
</li>
 <li>
 <input value="saved2" type="radio" class="include oneofmanyfieldset addressradio" name="collectionaddressradio" id="collectionaddressradiosaved2"></input>
<span class="collectionaddresssaved2 savedaddress">
</span>
</li>
<li><input value="saved3" type="radio" class="include oneofmanyfieldset addressradio" name="collectionaddressradio" id="collectionaddressradiosaved3"></input>
<span class="collectionaddresssaved3 savedaddress">
</span>
</li>
<li class="allbutonetarget"><input value="other" type="radio" class="include oneofmanyfieldset addressradio" name="collectionaddressradio" id="collectionaddressradioother">Other </input>
<span>
</span>
</li>
</ul>

If someone could point me in the right direction and let me know where this is going wrong I’d be really grateful.

Answer 1

$('input.addressradio').on('change', function(){ 
  $(this).parent().siblings('li').not(this).not('.allbutonetarget').hide();   
}); ​