单选按钮和javascript

我有一个单选按钮组的表单（6个单选按钮）

id是r1、r2、r3、r4、r5、r6

此页面中有6个隐藏表（display=none；）

表id为t1、t2、t3、t4、t5、t6

如果选中单选按钮，我想将表的dispaly属性更改为inline

如果,

r1无线电检查显示表t1（其他表应隐藏）

r2无线电检查显示表t2（其他表应隐藏）

r3 无线电检查显示表t3（其他表应隐藏）…依此类推

---

我试图用document.getElementById来实现这一点，但我的代码没有正常工作，因为我是javascript新手。因此，如何执行此操作？

要以跨浏览器兼容的方式显示和隐藏表格，必须检查style.display的当前值：

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++;
}

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

相当于：

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

选择无线电输入时，您可以使用表格作为参数调用

toggleDisplay（）

如果你经常遇到这些类型的问题，你可能希望考虑使用一个框架来避免跨浏览器的兼容性问题，避免写大量的样板代码。

1
两个
三
表1
表2
表3
var表；
window.ShowTable=函数（待定）
{
如果（！表）
{
tables=document.getElementsByTagName（'table'）；
}
对于（i=0；i您是否使用jQuery或任何其他框架？您是否至少可以显示一些HTML片段以及您迄今为止编写的代码？这将非常有帮助。或者至少在发布问题之前尝试使用Google。这是基本的Javascript，将在1001教程中向您解释。CTRL代表控件。Index是选中当前单选按钮。element.setAttribute完全按照其名称执行。是的，但事件绑定到输入标记。也许您应该使用标准的if else子句，然后使用？：运算符。@Aleksandar:三元运算符在这种情况下工作得很好，并生成简洁的代码。在您自己的实现中，可以随意使用ts适合你。不。我知道接线员是干什么的。但他说他是初学者，所以我想如果不是这样的话，他会更容易理解。
if ( element.display == 'none' ) {
    element.display = 'block';
}
else {
    // Do nothing
}

<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;
}