javascript - dynamic show and hide of radio buttons based on output of another radio button -

javascript - dynamic show and hide of radio buttons based on output of another radio button -

i'm working next html:

<div class="form"> <input type="radio" name="type" value="100" checked="checked" />100 <input type="radio" name="type" value="200" />200 <input type="radio" name="type" value="300" />300 <input type="radio" name="type" value="other" />other </div> <input type="radio" name="img" value="100"/> img1 <input type="radio" name="img" value="200"/> img2 <input type="radio" name="img" value="100"/> img3 <input type="radio" name="img" value="200"/> img4 <input type="radio" name="img" value="300"/> img5 <input type="radio" name="img" value="100"/> img6 <input type="radio" name="img" value="200"/> img7 <input type="radio" name="img" value="300"/> img8 <input type="radio" name="img" value="200"/> img9 <input type="radio" name="img" value="100"/> img10

what i'm trying accomplish jquery show or hide of bottom radio buttons matching values of top radio buttons, i.e. if user clicks on top radio button list displayed based on value of button user checked. found many similiar answers based on either classes or divs. none told matching values. had post this.

i've created fiddle code.

you can similar below note text each radio button img1, img2, etc won't hide not within element can selected along radio button.

var imageradiobuttons = $('[name="img"]'); $('[name="type"]').click(function(){ var selectedvalue = this.value; imageradiobuttons.show(); imageradiobuttons.filter(function(){ homecoming this.value === selectedvalue; }).hide(); })

demo 1 - hide matching radio buttons

edit

so if hide each shall within 1 div id element? or div class element?

you can illustration wrap them span this:

<div class="form"> <input type="radio" name="type" value="100" checked="checked" />100 <input type="radio" name="type" value="200" />200 <input type="radio" name="type" value="300" />300 <input type="radio" name="type" value="other" />other </div> <input type="radio" name="img" value="100"/> <span>img1</span> <input type="radio" name="img" value="200"/> <span>img2</span> <input type="radio" name="img" value="100"/> <span>img3</span> <input type="radio" name="img" value="200"/> <span>img4</span> <input type="radio" name="img" value="300"/> <span>img5</span> <input type="radio" name="img" value="100"/> <span>img6</span> <input type="radio" name="img" value="200"/> <span>img7</span> <input type="radio" name="img" value="300"/> <span>img8</span> <input type="radio" name="img" value="200"/> <span>img9</span> <input type="radio" name="img" value="100"/> <span>img10</span>

then can adjust script hide next span element next current input along it, similar this:

imageradiobuttons.filter(function(){ homecoming this.value === selectedvalue; }).hide().next('span').hide();

demo 2 - hide matching radio buttons , text

in add-on updated script demo 2 hide matching buttons when loaded. can adjust else need there.

full script demo 2:

var typeradiobuttons = $('[name="type"]'); var imageradiobuttons = $('[name="img"]'); var hideselected = function(selectedvalue){ imageradiobuttons.filter(function(){ homecoming this.value === selectedvalue; }).hide().next('span').hide(); }; var initvalue = typeradiobuttons.filter(function(){ homecoming this.checked; })[0].value; hideselected(initvalue); typeradiobuttons.click(function(){ var selectedvalue = this.value; imageradiobuttons.show().next('span').show(); hideselected(selectedvalue); });

javascript jquery ajax