Question

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

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

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

表id是t1，t2，t3，t4，t5，t6。

如果选中单选按钮，我想将表的显示属性更改为内联，

如果

，

r1电台检查显示表t1，（其他表应隐藏）

r2电台检查显示表t2，（其他表应隐藏）

R3 收音机检查显示表t3，（其他表应隐藏）..等等

我试图用document.getElementById做这个，但我的代码没有正常工作，因为我是javascript的新手。那怎么办呢？

Answer 1

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

Answer 2

要以跨浏览器兼容的方式显示和隐藏表格，您必须检查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>

请注意，在上面的代码中，这一行：

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

相当于：

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

选择无线电输入时，您可以将表格作为参数调用toggleDisplay()。

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

Answer 3

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

单选按钮和JavaScript

3 个答案: