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;
}
精彩评论