Show DIV only when a specific radio item is selected - html

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>

Answer 2

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