show and hide divs based on radio button click

Question

I want to be able to dynamically change what divs are show using radio button and jQuery  -  HTML       lt div id  myRadioGroup  gt   2 Cars lt input type  radio  name  cars  checked  checked  value  2     gt   3 Cars lt input type  radio  name  cars  value  3    gt    lt div id  twoCarDiv  gt  2 Cars Selected  lt  div gt   lt div id  threeCarDiv  gt  3 Cars  lt  div gt   lt  div gt    and the jQuery          lt script gt    document  ready function            input name   cars     click function             var test     this  val               div desc   hide                  test  show                  lt  script gt    This does nothing   the divs always show  Im sure this is simple  but Im poor at jQuery

User · Answer

Here you can find exactly what you are looking for.

<div align="center">
  <input type="radio" name="name_radio1" id="id_radio1" value="value_radio1">Radio1
  <input type="radio" name="name_radio1" id="id_radio2" value="value_radio2">Radio2
</div>
 <br />
<div align="center" id="id_data" style="border:5">
  <div>this is div 1</div>
  <div>this is div 2</div>
  <div>this is div 3</div>
  <div>this is div 4</div>
</div>
<script src="jquery.js"></script>
<script>
 $(document).ready(function() {
 // show the table as soon as the DOM is ready
 $("#id_data").show();
 // shows the table on clicking the noted link
  $("#id_radio1").click(function() {
   $("#id_data").show("slow");
  });
 // hides the table on clicking the noted link
   $("#id_radio2").click(function() {
   $("#id_data").hide("fast");
   });
 });

  $(document).ready(function(){} – When document load.
  $("#id_data").show(); – shows div which contain id #id_data.
  $("#id_radio1").click(function() – Checks  radio button is clicked containing id #id_radio1.
  $("#id_data").show("slow"); – shows div containing id #id_data.
  $("#id_data").hide("fast"); -hides div when click on radio button containing id #id_data.

Thats it..

http://patelmilap.wordpress.com/2011/02/04/show-hide-div-on-click-using-jquery/

User · Answer

This should do what you need   http   jsfiddle net 7Ud6B

User · Answer

You re on the right track  but you forgot two things    add the desc classes to your description divs You have numeric values for the input but text for the id    I have fixed the above and also added a line to initially hide   the third description div   Check it out in action - http   jsfiddle net VgAgu 3   HTML   lt div id  myRadioGroup  gt      2 Cars lt input type  radio  name  cars  checked  checked  value  2     gt      3 Cars lt input type  radio  name  cars  value  3    gt        lt div id  Cars2  class  desc  gt          2 Cars Selected      lt  div gt       lt div id  Cars3  class  desc  style  display  none   gt          3 Cars      lt  div gt   lt  div gt    JQuery    document  ready function            input name   cars     click function             var test     this  val                div desc   hide                Cars    test  show

User · Answer

Your selector for the  show   and  hide   are not pointing to anything in the code   Fixed version in jsFiddle

User · Answer

You were pretty close  You re description div tags didn t have the  desc class defined  For your scenario you should have the radio button value equal to the div that you re trying to show   HTML   lt div id  myRadioGroup  gt       2 Cars lt input type  radio  name  cars  checked  checked  value  twoCarDiv     gt       3 Cars lt input type  radio  name  cars  value  threeCarDiv    gt        lt div id  twoCarDiv  class  desc  gt          2 Cars Selected      lt  div gt       lt div id  threeCarDiv  class  desc  gt          3 Cars Selected      lt  div gt   lt  div gt    jQuery    document  ready function            div desc   hide           input name   cars     click function             var test     this  val               div desc   hide                    test  show                    working example  http   jsfiddle net hunter tcDtr

User · Answer

With    div desc   hide    you are essentially trying to hide a div with a class name of desc  Which doesn t exist  With       test  show    you are trying to show either a div with an id of  2 or  3  Those are illegal id s in HTML  can t start with a number   though they will work in many browsers  However  they don t exist    I d rename the two divs to carDiv2 and carDiv3 and then use different logic to hide or show   if  test     2            Also  use a class for your checkboxes so your binding becomes something like       carCheckboxes   click function

User · Answer

The hide selector was incorrect  I hid the blocks at page load and showed the selected value  I also changed the car div id s to make it easier to append the radio button value and create the proper id selector    lt div id  myRadioGroup  gt    2 Cars lt input type  radio  name  cars  checked  checked  value  2     gt    3 Cars lt input type  radio  name  cars  value  3    gt     lt div id  car-2  gt    2 Cars    lt  div gt     lt div id  car-3  gt    3 Cars    lt  div gt   lt  div gt    lt script type  text javascript  gt    document  ready function          div div   hide          car-2   show         input name   cars     click function           var test     this  val             div div   hide              car-  test  show                lt  script gt

User · Answer

This worked for me    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt           lt title gt Untitled Document lt  title gt           lt script type  text javascript  gt              function show str                   document getElementById  sh2   style display    none                   document getElementById  sh1   style display    block                             function show2 sign                   document getElementById  sh2   style display    block                   document getElementById  sh1   style display    none                          lt  script gt       lt  head gt        lt body gt           lt p gt               lt input type  radio  name  r1  id  e1  onchange  show2     gt  amp nbsp I Am New User amp nbsp  amp nbsp  amp nbsp               lt input type  radio  checked  checked  name  r1  onchange  show this value    gt  amp nbsp Existing Member          lt  p gt           lt div id  sh1  gt Hello There    lt  div gt           lt p gt  amp nbsp  lt  p gt           lt div id  sh2  style  display none   gt Hey Watz up    lt  div gt       lt  body gt   lt  html gt

[jquery] show and hide divs based on radio button click

Examples related to jquery

Examples related to radio