Show DIV only when a specific radio item is selected

Question

I have this code which works without a problem with select options:

HTML

   <select onchange="java_script_:show(this.options[this.selectedIndex].value)">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Bananna">Bananna</option>
    </select>


 <div id="hiddenDiv" style="display:none">Hidden Question about Oranges</div>

Script

 <script>
    function show(aval) {
    if (aval == "Orange") {
    hiddenDiv.style.display='inherit';
    } else {
    hiddenDiv.style.display='none';
    }
    }
    </script>

Any ideas how can I make this code to work if those were radio options?

Answer 1

Try it like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" id="Apple"/> Apple <br>
  <input type="radio" name="radioName" id="Orange" /> Orange <br>
  <input type="radio" name="radioName" id="Bananna" /> Bananna <br>
</form>

<div id="hiddenDiv" style="display:none">Hidden Question about Oranges</div>
<script>
$('#myForm input').on('change', function() {
   if ($(this).attr('id') == "Orange") {
      hiddenDiv.style.display='inherit';
    } else {
      hiddenDiv.style.display='none';
    } 
});
</script>