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?

you can make an on click function. when you click the first radio button the div has display inherit, when u click the second it has display none. Or when u click the first one you add a html class on it that has display block, and remove it when you click the other one. — Torjescu Sergiu, Aug 28 '18 at 12:13

Vladimir · Accepted Answer · 2018-08-28T13:20:33.437

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>

edited Aug 28 '18 at 13:20

answered Aug 28 '18 at 12:19

Vladimir

176
1
1
12

Works fine, thanks, but I just realized that instead of value="Orange" I'll need to use id="Orange" so how to change the script code to work with the "id" instead of the "value"? – Nikola Nastevski Aug 28 '18 at 12:45
1

Use the condition: `if ($(this).attr('id') == "Orange")` corrected the implementation. – Vladimir Aug 28 '18 at 13:19
Was just about to write that I've figured it out exactly the way you wrote it :) Thanks a lot ;) – Nikola Nastevski Aug 28 '18 at 13:47

score 0 · Answer 2 · answered Aug 28 '18 at 12:16

My solution with JQuery:

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

Show DIV only when a specific radio item is selected

2 Answers2