Question

Ideally I would like to be able to make the event target all p.hiddeninput, which do not also have the specific (“.” + this.id + “Y”) class, within the parent div of the radio buttons. I have tried using the .parent() selector without any success.

I have a situation where I need to set up 5 radio buttons, 4 of which need to display a specific hidden input when they are clicked. Both the price table and supplement radio buttons need to open the same input. Any previously open inputs need to also hide when this occurs. Currently I have html that looks like this,

<input value="auto" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiomarkdown">Markdown</input>
<input value="pricetable" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiopricetable">Price table</input>
<input value="fromsupplement" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiofromsupplement">From supplement</input>
<input value="discount" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradiodiscount">Discount</input>
<input value="noprice" type="radio" class="oneofmany" name="buypricebyradio" id="buypricebyradionoprice">No price</input>


<p style="display:none" class="buypricebyradiopricetableY buypricebyradiofromsupplementY hiddeninput"><label for="buyingpricetable">Buying price table:</label><input class="medium include search" id="buyingpricetablesearch"></input></p>
<p style="display:none" class="buypricebyradiomarkdownY hiddeninput"><label for="markdownstyle">Mark down style:</label><input class="medium include search" id="markdownstylesearch"></input></p>
<p style="display:none" class="buypricebyradiodiscountY hiddeninput"><label for="buydiscountstyle">Discount style:</label><input class="medium include search" id="buydiscountstylesearch"></input></p>

With a jscript command of

$('.oneofmany').click(function(){     
      $("p.hiddeninput").not("." + this.id + "Y").hide();   
      $('.' + this.id + "Y").show();
}); 

This works just fine for one set of radio buttons and inputs. However I need to have multiple sets, and in this situation, when a radio button is clicked in one set of inputs, it closes all the inputs in the other sections as well.

Is it possible to target an event like this, and if not can anyone suggest a solution to this problem? Thank you for your time.

Answer 1

target all elements of a specific class within the parent div of the button that calls the event?

$(this).parent('div').find('.specific-class')