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:

  <div id="myRadioGroup">

2 Cars<input type="radio" name="cars" checked="checked" value="2"  />

3 Cars<input type="radio" name="cars" value="3" />

<div id="twoCarDiv">
2 Cars Selected
</div>
<div id="threeCarDiv">
3 Cars
</div>
</div>

and the jQuery:

     <script>
$(document).ready(function(){ 
    $("input[name$='cars']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});
</script>

This does nothing , the divs always show. Im sure this is simple, but Im poor at jQuery .

Jason McCreary · Accepted Answer · 2012-10-03T13:58:55.913

56

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

<div id="myRadioGroup">
    2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
    3 Cars<input type="radio" name="cars" value="3" />

    <div id="Cars2" class="desc">
        2 Cars Selected
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        3 Cars
    </div>
</div>

JQuery

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});

edited Oct 03 '12 at 13:58

answered May 09 '11 at 18:41

Jason McCreary

71,546
23
135
174

Man, in my case, it will show some required input to fill based on the selected radio button. my question is how to NOT required the hidden inputs? – Al Kush Nov 07 '14 at 06:31
this not working if you select other radio option other than default checked and reload the page. – user3613026 Nov 07 '22 at 13:21
Avoid hiding an element with inline styling defaulting to display:none as this will cause issues. It's better to use a css class to override the default display so that you don't have to override the specificity with !important attributes later on. – Bonez024 Feb 24 '23 at 14:52

score 12 · Answer 2 · answered May 09 '11 at 18:42

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

<div id="myRadioGroup">

    2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv"  />

    3 Cars<input type="radio" name="cars" value="threeCarDiv" />

    <div id="twoCarDiv" class="desc">
        2 Cars Selected
    </div>
    <div id="threeCarDiv" class="desc">
        3 Cars Selected
    </div>
</div>

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/

This is very helpful tips. Thank you for this nice solution. — codewitharefin, Feb 23 '17 at 12:08
This still doesn't show the div on page load where the input is `checked`. Only the radio is shown as selected. — Kyle Underhill, Apr 12 '18 at 06:38

score 5 · Answer 3 · edited Oct 01 '12 at 11:39

This worked for me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            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';
            }
        </script>
    </head>

    <body>
        <p>
            <input type="radio" name="r1" id="e1" onchange="show2()"/>&nbsp;I Am New User&nbsp;&nbsp;&nbsp;
            <input type="radio" checked="checked" name="r1" onchange="show(this.value)"/>&nbsp;Existing Member
        </p>
        <div id="sh1">Hello There !!</div>
        <p>&nbsp;</p>
        <div id="sh2" style="display:none;">Hey Watz up !!</div>
    </body>
</html>

Milap · Answer 4 · 2017-03-30T06:12:31.377

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/

score 2 · Answer 5 · answered May 09 '11 at 18:43

2

This should do what you need

http://jsfiddle.net/7Ud6B/

answered May 09 '11 at 18:43

Fareesh Vijayarangam

5,037
4
23
18

score 1 · Answer 6 · answered May 09 '11 at 18:42

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.

<div id="myRadioGroup">
  2 Cars<input type="radio" name="cars" checked="checked" value="2"  />
  3 Cars<input type="radio" name="cars" value="3" />
  <div id="car-2">
  2 Cars
  </div>
  <div id="car-3">
  3 Cars
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){ 
  $("div div").hide();
  $("#car-2").show();
  $("input[name$='cars']").click(function() {
      var test = $(this).val();
      $("div div").hide();
      $("#car-"+test).show();
  }); 
});
</script>

score 1 · Answer 7 · edited May 09 '11 at 20:17

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

score 0 · Answer 8 · edited Sep 07 '17 at 05:00

0

Your selector for the .show() and .hide() are not pointing to anything in the code.

Fixed version in jsFiddle

edited Sep 07 '17 at 05:00

Milap

6,915
8
26
46

answered May 09 '11 at 18:48

ShaneBlake

11,056
2
26
43

show and hide divs based on radio button click

8 Answers8

HTML

JQuery

Linked