How to use jQuery to show hide divs based on radio button selection

Question

I have some radio buttons and I d like to have different hidden divs show up based on which radio button is selected  Here s what the HTML looks like    lt form name  form1  id  my form  method  post  action    gt       lt div gt  lt label gt  lt input type  radio  name  group1  value  opt1  gt opt1 lt  label gt  lt  div gt         lt div gt  lt label gt  lt input type  radio  name  group1  value  opt2  gt opt2 lt  label gt  lt  div gt         lt div gt  lt label gt  lt input type  radio  name  group1  value  opt3  gt opt3 lt  label gt  lt  div gt         lt input type  submit  value  Submit  gt   lt  form gt          lt style type  text css  gt       desc   display  none     lt  style gt          lt div id  opt1  class  desc  gt lorem ipsum dolor lt  div gt   lt div id  opt2  class  desc  gt consectetur adipisicing lt  div gt   lt div id  opt3  class  desc  gt sed do eiusmod tempor lt  div gt    And here s my jQuery     document  ready function            input name   group2     click function             var test     this  val                  test  show                   The reason I m doing it that way is because my radio buttons and divs are being generated dynamically  the value of the radio button will always have a corresponding div   The code above works partially - the divs will show when the correct button is checked  but I need to add in some code to make the divs hide again once the button is unchecked  Thanks

User · Answer

The simple jquery source for the same -

$("input:radio[name='group1']").click(function() {      
    $('.desc').hide();
    $('#' + $("input:radio[name='group1']:checked").val()).show();
});

In order to make it little more appropriate just add checked to first option --

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

remove .desc class from styling and modify divs like --

<div id="opt1" class="desc">lorem ipsum dolor</div>
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div>
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

it will really look good any-ways.

User · Answer

I wrote a simple code to unterstand you to how to make a show and hide radio buttons in jquery its very simple    lt div id  myRadioGroup  gt       Value Based lt input type  radio  name  cars  checked  checked  value  2     gt       Percent Based lt input type  radio  name  cars  value  3    gt       lt br gt       lt div id  Cars2  class  desc  style  display  none   gt           lt br gt           lt label for  txtPassportNumber  gt Commission Value lt  label gt          lt input type  text  id  txtPassportNumber  class  form-control    gt       lt  div gt       lt div id  Cars3  class  desc  style  display  none   gt           lt br gt           lt label for  txtPassportNumber  gt Commission Percent lt  label gt          lt input type  text  id  txtPassportNumber  class  form-control    gt       lt  div gt   lt  div gt   lt  div gt    Jquery code    document  ready function            input name   cars     click function             var test     this  val                div desc   hide                Cars    test  show                  give me comments

User · Answer

An interesting solution is to make this declarative  you just give every div that should be shown an attribute automaticallyVisibleIfIdChecked with the id of the checkbox or radio button on which it depends  That is  your form looks like this    lt form name  form1  id  my form  method  post  action    gt       lt div gt  lt label gt  lt input type  radio  name  group1  id  rdio1  value  opt1  gt opt1 lt  label gt  lt  div gt         lt div gt  lt label gt  lt input type  radio  name  group1  id  rdio2  value  opt2  gt opt2 lt  label gt  lt  div gt     lt  form gt        lt div id  opt1  automaticallyVisibleIfIdChecked  rdio1  gt lorem ipsum dolor lt  div gt   lt div id  opt2  automaticallyVisibleIfIdChecked  rdio2  gt consectetur adipisicing lt  div gt    and have some page independent JavaScript that nicely uses functional programming   function executeAutomaticVisibility name            name   name    checked   each function                 automaticallyVisibleIfIdChecked     this id      show                    name   name    not  checked    each function                 automaticallyVisibleIfIdChecked     this id      hide                 document  ready  function         triggers       automaticallyVisibleIfIdChecked             map function    return           this  attr  automaticallyVisibleIfIdChecked    get            unique triggers       triggers each  function             executeAutomaticVisibility this name             this  change  function    executeAutomaticVisibility this name                      Similarily you could automatically enable   disable form fields with an attribute automaticallyEnabledIfChecked   I think this method is nice since it avoids having to create specific JavaScript for your page - you just insert some attributes that say what should be done

User · Answer

Update 2015 06  As jQuery has evolved since the question was posted  the recommended approach now is using   on    document  ready function            input name group2    on   change   function               var test     this  val                 desc   hide                   test  show                   or outside   ready      document  on   change    input name group2    function                Original answer  You should use  change   event handler     document  ready function            input name group2    change function             var test     this  val                desc   hide                  test  show                   should work

User · Answer

lt script type  text javascript  gt    function             name toggler    click function                    toHide   hide                    blk-    this  val    show  slow                  lt  script gt   lt  head gt   lt body gt   lt label gt  lt input id  rdb1  type  radio  name  toggler  value  1    gt Book lt  label gt   lt label gt  lt input id  rdb2  type  radio  name  toggler  value  2    gt Non-Book lt  label gt    lt div id  blk-1  class  toHide  style  display none  gt        lt form action  success1 html  gt           Name1  lt input type  text  name  name  gt                lt input type  submit  name  submit  gt        lt  form gt    lt  div gt   lt div id  blk-2  class  toHide  style  display none  gt        lt form action  success1 html  gt           Name2  lt input type  text  name  name  gt                lt input type  submit  name  submit  gt        lt  form gt   lt  div gt

User · Answer

Below code is perfectly workd for me    x000D   x000D    document  ready function    x000D         input type  radio     click function    x000D          var inputValue     this  attr  value    x000D          var targetBox           inputValue   x000D              box   not targetBox  hide    x000D            targetBox  show    x000D          x000D      x000D   box  x000D          color   fff  x000D          padding  20px  x000D          display  none  x000D          margin-top  20px  x000D        x000D       red  background   ff0000    x000D       green  background   228B22    x000D       blue  background   0000ff    x000D      label  margin-right  15px    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div gt  x000D           lt label gt  lt input type  radio  name  colorRadio  value  red  gt  red lt  label gt  x000D           lt label gt  lt input type  radio  name  colorRadio  value  green  gt  green lt  label gt  x000D           lt label gt  lt input type  radio  name  colorRadio  value  blue  gt  blue lt  label gt  x000D       lt  div gt  x000D       lt div class  red box  gt You have selected  lt strong gt red radio button lt  strong gt  so i am here lt  div gt  x000D       lt div class  green box  gt You have selected  lt strong gt green radio button lt  strong gt  so i am here lt  div gt  x000D       lt div class  blue box  gt You have selected  lt strong gt blue radio button lt  strong gt  so i am here lt  div gt  x000D   x000D   x000D

User · Answer

You can use jQuery   s show   and hide   methods  Like below  JQuery      document  ready function           input type  quot radio quot     click function          var val     this  attr  quot value quot          var target      quot   quot    val            quot  msg quot   not target  hide            target  show                   HTML   lt input type  quot radio quot  name  quot color quot  value  quot yellow quot  gt  Yellow  lt input type  quot radio quot  name  quot color quot  value  quot red quot  gt  Red  lt input type  quot radio quot  name  quot color quot  value  quot green quot  gt  Green   lt div class  quot yellow msg quot  gt You have selected Yellow lt  div gt   lt div class  quot red msg quot  gt You have selected Red lt  div gt   lt div class  quot green msg quot  gt You have selected Green lt  div gt   Here is an example  Show hide DIV based on Radio Button click

User · Answer

Just hide them before showing them     document  ready function            input name   group2     click function             var test     this  val               div desc   hide                  test  show

User · Answer

document  ready function            input name group1    change function             var test     this  val                desc   hide                  test  show                   It s correct input name group1  in this example  However  thanks for the code

[jquery] How to use jQuery to show/hide divs based on radio button selection?

Examples related to jquery

Examples related to radio-button

Examples related to mouseclick-event