radio buttons and javascript

i have a form with a radio button group(6 radio buttons),

id's are r1,r2,r3,r4,r5,r6

and there are 6 hidden tables(display=none;) in this page,

tables id's are t1,t2,t3,t4,t5,t6 .

i want to change the table's dispaly property as inline if a radio button checked,

if,

r1 radio checked show table t1,(other tables should be hidden)

r2 radi开发者_StackOverflow社区o checked show table t2, (other tables should be hidden)

r3 radio checked show table t3,(other tables should be hidden)..so on

i tried to do this with document.getElementById ,but my code did not worked correctly since i am new to javascript. so how to do this?

var ctrls = document.getElementsByTagName("input");
var index = 0;
for(var ctrl in ctrls) 
{
   if(ctrl.type == "radio") 
    {
        if(ctrl.checked == true) 
        {
          var tbl = document.getElementById("t"+index);
          tbl.setAttribute("style","display:inline");// or other display.
        }
   }
   index++;
}

To show and hide tables in a cross-browser compatible manner, you must check the current value of style.display:

<script type="text/javascript">
function toggleDisplay(e){
    element = document.getElementById(e).style;
    element.display == 'none' ? element.display = 'block' : 
    element.display='none';
    swapImage
}
</script>

Note that in the code above, this line:

element.display == 'none' ? element.display = 'block' : 

is a equivalent to:

if ( element.display == 'none' ) {
    element.display = 'block';
}
else {
    // Do nothing
}

You can call toggleDisplay() with the table as the parameter when your radio input is selected.

If you encounter these types of issues on a regular basis, you may wish to consider using a framework such as jQuery to avoid cross-browser compatibility issues and to avoid writing a lot of boilerplate code.

http://jsfiddle.net/d5hnw/1/

<label for="radio1">One</label>
<input name="group" onclick="ShowTable('tb1')" type="radio" id="radio1" />
<label for="radio1">Two</label>
<input name="group" onclick="ShowTable('tb2')" type="radio" id="radio2" />
<label for="radio1">Three</label>
<input name="group" onclick="ShowTable('tb3')" type="radio" id="radio3" />



<table id="tb1">
    <tr>
        <td>
            table 1
        </td>
    </tr>
</table>
<table id="tb2">
    <tr>
        <td>
            table 2
        </td>
    </tr>
</table>
<table id="tb3">
    <tr>
        <td>
            table 3
        </td>
    </tr>
</table>


var tables;
window.ShowTable=function(tbl)
{
    if(!tables)
    {
        tables=document.getElementsByTagName('table');
    }

    for(i=0;i<tables.length;i++)
    {
       tables[i].style.display="none";  
    }

    document.getElementById(tbl).style.display="block";

}


table
{
    display:none;
}