I have no idea if this works or is a good way to do it, but hopefully
gives you an idea
$(function() {
$("div[id^=SecondaryBox]").hide(); // hides all secondary boxes
$("input[name^=MainStuff]").bind("click", function() {
var selected = $(":checked", this).val(); // get value of
checked radio button
var nextDiv = $(this).parent().parent().next(); // gets the
secondaryBox relative to clicked radio button
if (selected == '3') nextDiv.show();
else nextDiv.hide();
});
});
On Feb 2, 3:04 pm, StanW <webe...@u.washington.edu> wrote:
> I am trying to understand show/hide toggled from the value of a selected
> radio button. I know this topic has been addressed here often, but I cannot
> seem to apply other's answers.
>
> I have a series of primary radio button groups. Each primary group has a
> single associated secondary group. I want the secondary group to be hidden
> on load, but then toggled if a specific primary radio button is chosen.
>
> For example in the code below, I would like the secondary radio groups to
> only appear if the value "3" is selected. Once the group is shown, if
> another value is selected I would like like the secondary radio group to be
> re-hidden. If it makes easier code, the value "3" will always be the value
> to show any of the secondary groups.
>
> This must be doable, but is beyond me. Thank you for your help!
>
> HTML:
>
> <p>SecondaryBox1 should be hidden until PrimaryBox1 is selected as value
> 3, then toggled if PrimaryBox1 is something other than 3 </p>
>
> <div id="PrimaryBox1">
> <fieldset>
> <input name="MainStuffQ1" type="radio" value="1" /> 1
> <input name="MainStuffQ1" type="radio" value="2" /> 2
> <input name="MainStuffQ1" type="radio" value="3" /> 3
> </fieldset>
> </div>
>
> <div id="SecondaryBox1">
> <fieldset>
> <input name="SecondaryStuffQ1" type="radio" value="a" /> a
> <input name="SecondaryStuffQ1" type="radio" value="b" /> b
> <input name="SecondaryStuffQ1" type="radio" value="c" /> c
> <input name="SecondaryStuffQ1" type="radio" value="d" /> d
> </fieldset>
> </div>
>
> <p>SecondaryBox2 should be hidden until PrimaryBox2 is selected as value
> 3, then toggled if PrimaryBox2 is something other than 3 </p>
>
> <div id="PrimaryBox2">
> <fieldset>
> <input name="MainStuffQ2" type="radio" value="1" /> 1
> <input name="MainStuffQ2" type="radio" value="2" /> 2
> <input name="MainStuffQ2" type="radio" value="3" /> 3
> </fieldset>
> </div>
>
> <div id="SecondaryBox2">
> <fieldset>
> <input name="SecondaryStuffQ2" type="radio" value="a" /> a
> <input name="SecondaryStuffQ2" type="radio" value="b" /> b
> <input name="SecondaryStuffQ2" type="radio" value="c" /> c
> <input name="SecondaryStuffQ2" type="radio" value="d" /> d
> </fieldset>
> </div>
>
> --
> View this message in
> context:http://www.nabble.com/Hide-or-show-div-depending-on-the-value-of-radi...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
