Home/ Questions/Q 8168223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T20:26:58+00:00

Here’s the code for a simple page I have that is not working: <head>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0