Question

I want to display a div if a certain radio button in a form is selected, but hide that div if any other radio button in the form is selected, using jquery.

This is the code I have that isn’t working:

$("select").change(function(){
if($("#radio1").is(":selected")){
    $("#grid_9 omega").slideDown("slow");
} else { $("#grid_9 omega").slideUp("slow"); } 
});

where the id for the radio button I want to have display the div “gid_9 omega” is “radio1”.

Thanks for your help!

Answer 1

I took the liberty of thinking that maybe omega was a class that you were referring to incorrectly.

First, there is no select here so that is not going to work for you. You need to test on all input[type=radio].

Next, radio button attribute for selected is actually checked=checked, so you need to test if the one you want to be checked is checked. If not, do nothing, if so, show your div.

A JSFiddle

Using a similar html structure to this below:

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

your js would look like this:

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

​