Reset values and make visiable for all elements associated to the radio button group member selected

Question

We all know only one in a radio button group (radio with the same name) can be selected, but my app needs to show/hide content in a block (may have nested elements in the block) based on the selected radio button.

Question: How can I create an algorithm using jQuery that will show content in a block when the radio button is selected and hide that content when a different radio button is selected?

Algorithm: any one of radio1, radio2, …and radioN of the same name been selected, Flip(classname,id) needs to make all elements visible & value reset in the classname passed, and invisible all the other except id passed in.

<script type="text/javascript">
  function Flip(classname,id) {
    //this javascript function will make 
    //    1) id of the given classname visible, 
    //    2) and reset & invisible all the rest (all div elements of the given classname except id invisible

}

</script>
</head>
<body>
Requestor:<input type="radio" name="Req" onclick="Flip('RadioClass','radioDIV1');" /><br />
<div class="RadioClass" id="radioDIV1" style="display:none;" >
    Requestor 1234:
    <div >
        decendant level1a:
    </div>
</div>
Submitter:<input type="radio" name="Req" onclick="Flip('RadioClass','radioDIV2');" /><br />
<div class="RadioClass" id="radioDIV2" style="display:none;">
    Submitter 567:
    <div >
        decendant level1b:
    </div>
</div>
ForInfo:<input type="radio" name="Req" onclick="Flip('RadioClass','radioDIV3');" /><br />
<div class="RadioClass" id="radioDIV3" style="display:none;" >
    ForInfo 89:
</div>
</body>

What exactly is the question? – Lowkase Jul 11 '12 at 19:22 — Lowkase, Jul 11 '12 at 19:22

score 1 · Answer 1 · answered Jul 11 '12 at 19:30

Here is a fiddle that shows and hides the panels when a radio button is selected.

I implemented only two radio buttons instead of 3 ;-)

The HTML...

<body>
    <div>Requestor:<input type="radio" name="Req"/>
        <div class="RadioClass" id="radioDIV1" style="display:none;">
            Requestor 1234:
            <div >
                decendant level1a:
            </div>
        </div>
    </div>

    <div>Submitter:<input type="radio" name="Req"/>
        <div class="RadioClass" id="radioDIV2" style="display:none;">
            Submitter 567:
            <div >
                decendant level1b:
            </div>
        </div>
    </div>
</body>

And the JavaScript code using jQuery...

$("input").change(function() {
    $(".RadioClass").hide();
    $(this).next("div").toggle()
});

@TJDay Was my solution helpful? – Split Your Infinity Jul 12 '12 at 12:35 — Split Your Infinity, Jul 12 '12 at 12:35

Reset values and make visiable for all elements associated to the radio button group member selected

1 Answers1