Javascript Array Radio Button Toggle view of DIVs

Question

I have 4 radio buttons in a group with id=j1 id=j2 id=j3 id=j4 that needs to toggle the view of DIVS id=act1 id=act2 id=act3 id=act4 what I've done works but I would like an array preferably in JavaScript or both JavaScript and JQuery. I've seen some examples out there but not quite like this.

HTML

     <input id="j1" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j1">Not At Acute Risk </label><BR>
     <input id="j2" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j2"> Low Acute Risk </label><BR>
     <input id="j3" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j3"> Intermediate Acute Risk</label><BR>
     <input id="j4" name="h2" type="radio" value="" onclick="showRisk();">
     <label  for="j4"> High Acute Risk </label><BR>

   <div id="act1">
   Content1
   </div>

  <div id="act2">
  Content2
  </div>

  <div id="act3">
   Content3
  </div>

  <div id="act4">
  Content4
  </div>

CSS

    [id^="act"]   {
   display: none;
    }

JAVASCRIPT (Messy Messy need to clean up!)

function showRisk() {
if (document.getElementById("j1").checked == true)  {
document.getElementById("act1").style.display="block";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="none";

} else {

document.getElementById("act1").style.display="none";


if (document.getElementById("j2").checked == true)  {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="block";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="none";   

} else {

document.getElementById("act2").style.display="none";

if (document.getElementById("j3").checked == true)  {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="block";
document.getElementById("act4").style.display="none";   

} else {

document.getElementById("act3").style.display="none";

if (document.getElementById("j4").checked == true)  {
document.getElementById("act1").style.display="none";
document.getElementById("act2").style.display="none";
document.getElementById("act3").style.display="none";
document.getElementById("act4").style.display="block";  

} else {

    document.getElementById("act4").style.display="none";
            }

        }

       }

    }
   }

Answer 1

You don't need to check every element. Here's a simple working example created with jQuery:

http://jsbin.com/fokol/1/

Answer 2

HTML:

<input type="radio" id="j1" name="r" value="act1" checked>j1
<input type="radio" id="j2"  name="r"  value="act2">j2
<input type="radio" id="j3"  name="r"  value="act3">j3
<input type="radio" id="j4"  name="r"  value="act4">j4

    <div id="act1" class="block">act1</div>
    <div id="act2" class="block" style="display: none;">act2</div>
    <div id="act3" class="block" style="display: none;">act3</div>
    <div id="act4" class="block" style="display: none;">act4</div>

css:

div{
    border:1px solid black;
    width: 100px;
    height: 50px;

}

JAVASCRIPT:

$('document').ready(function(){
    $('input').click(function(){
        $('.block').hide();
            $('#' + $("input:radio[name='r']:checked").val()).show();

    });
});

DEMO HERE