Hide or show div depending on the value of radio button

[StanW]

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>

[James-279]

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...@...> 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.

[Beres Botond]

It's fairly simple to do.
I haven't tested this piece of code, but it should work.

$("div[id^=PrimaryBox] :radio").click(function() {
     var clicked_val = $(this).val();
     var div_idstr = $(this).parent('div').attr('id')
     var group_number = div_idstr.substring
(div_idstr.length-1,div_idstr.length)
     alert(clicked_val)
     if(clicked_val == '3') {
             $("#SecondaryBox"+group_numer).show()
     } else {
             $("#SecondaryBox"+group_numer).hide()
     }
});

On Feb 3, 3:53 am, James <james.gp....@...> wrote:

> 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...@...> 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.

[Beres Botond]

typo: group_numer = group_number

On Feb 3, 10:31 am, Beres Botond <boton...@...> wrote:

> It's fairly simple to do.
> I haven't tested this piece of code, but it should work.
>
> $("div[id^=PrimaryBox] :radio").click(function() {
>      var clicked_val = $(this).val();
>      var div_idstr = $(this).parent('div').attr('id')
>      var group_number = div_idstr.substring
> (div_idstr.length-1,div_idstr.length)
>      alert(clicked_val)
>      if(clicked_val == '3') {
>              $("#SecondaryBox"+group_numer).show()
>      } else {
>              $("#SecondaryBox"+group_numer).hide()
>      }
>
> });
>
> On Feb 3, 3:53 am, James <james.gp....@...> wrote:
>
>
>
> > 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...@...> 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.