Показывать DIV, только когда выбран конкретный радиоэлемент

Question

У меня есть этот код, который работает без проблем с опциями выбора:

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

Есть идеи, как заставить этот код работать, если это были опции радио?

Answer 1

Попробуй вот так

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

Answer 2

Мое решение с JQuery:

$(function () {
    $("select").click(function () {
        var validOption = $("select > option[value='Orange']");
        if (validOption[0].selected) {
            $("#hiddenDiv").show();
        } else {
            $("#hiddenDiv").hidde();
        }
    });
});