CODEWITHSUNDEEP
jquery
user1484219
user1484219

Reputation: 15

Use jquery to display div based on radio button selected

Here's the code for a simple page I have that is not working:

    <head>
<script src="js/jquery-1.7.min.js"></script>

<script type="text/javascript">
<!--
$("input[type=radio]").on('click', function(){
    if ($('#radio1').is(':checked')){
        $("#grid_9.omega").slideDown("slow");
    } else { 
        $("#grid_9.omega").slideUp("slow");
    }
});
//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen​</div>
</body>

My goal is to use jquery to display div "grid_9.omega" when "radio1" is selected, but have that div hidden when "radio1" isn't selected.

Advice?

Upvotes: 0

Views: 2300

Answers (3)

Nej Kutcharian
Nej Kutcharian

Reputation: 4254

Try this: jsFiddle

<script type="text/javascript">
$(function() {
$("input[type=radio]").on('click', function(){
    if ($('#radio1').is(':checked')){
        $("#grid_9.omega").slideDown("slow");
    } else { 
        $("#grid_9.omega").slideUp("slow");
    }
});
});
</script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen</div>

All I changed from your code was I added the document ready in the beginning of the script.

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

Simply you can do:

$("input[type=radio]").on('click', function(){
    if(this.id == 'radio1')
        $("#grid_9.omega").slideDown("slow");
    else
       $("#grid_9.omega").slideUp("slow");
});

Working sample

If your radio is dynamic i.e. append to DOM after page load then you need delegate event handler like following:

$('body').on('click', 'input[type=radio]', function() {
  if(this.id == 'radio1')
      $("#grid_9.omega").slideDown("slow");
  else
     $("#grid_9.omega").slideUp("slow");
});

Instead of input[type=radio] you can use only :radio as selector. i.e

$(':radio').on('click', ...)

or

$('body').on('click', ':radio',..)

Note

In case of delegate event it would be better to use any other static element instead of body. Suppose, if your form1 is Static to DOM i.e belong to DOM at time of page load then instead of

$('body').on('click', 'input[type=radio]', function() {..})

you should use

$('#form1').on('click', 'input[type=radio]', function() {..})

Remainder

Place all of your code within

$(document).ready(function() {
  // your code
});

is short

$(function() {
  // your code
});

Upvotes: 3

Claudio Redi
Claudio Redi

Reputation: 68400

Try with this

<script type="text/javascript">
<!--
$(function(){
    $(document).on('change','input:radio', function(){
        if ($('#radio1').is(':checked')){
            $("#grid_9.omega").slideDown("slow");
        } else { 
            $("#grid_9.omega").slideUp("slow");
        }
    });
}
//-->
</script>

jsFiddle demo

Upvotes: 1

Related Questions