如何让这个按钮只能单选，不能多选。请高手指点。

换单选按钮,用同样的名字即可,别用复选框checkbox

解决方案 »

  1.   

    那楼主还不如直接用单选按钮 radiobutton 有特殊要求？？
      

  2.   

    这个意思〉？？？？<script   language=javascript>   
    function   displayTable()   
    {   
    var   oCheck   =   document.getElementById("ck1").checked;   
    var   oTable   =   document.getElementById("tab1");   
    if(oCheck)   
    {   
    oTable.style.display   =   "";  
    document.getElementById("ck2").disabled=true;
    }   
    else   
    {   
    oTable.style.display   =   "none";   
    document.getElementById("ck2").disabled=false;
    }   
    }   
    function   displayTable2()   
    {   
    var   oCheck   =   document.getElementById("ck2").checked;   
    var   oTable   =   document.getElementById("tab2");   
    if(oCheck)   
    {   
    oTable.style.display   =   "";   
    document.getElementById("ck1").disabled=true;
    }   
    else   
    {   
    oTable.style.display   =   "none";   
    document.getElementById("ck1").disabled=false;
    }   
    }   </script>   
    <input   type="checkbox"   id="ck1"   onclick="displayTable()">   
    <input   type="checkbox"   id="ck2"   onclick="displayTable2()">   
    <table   id="tab1"   width=100   height=100   bgcolor="red"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table> 
    <table   id="tab2"   width=100   height=100   bgcolor="blue"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table> 
      

  3.   

    你为什么不用单选框呀，那样比较简单些！当然了，用复选框也可以，我把你的程序改了改，就可以实现了：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>fangjian.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script   language=javascript>   
    function   displayTable(ck_id)   
    {   
    if(ck_id=="ck1")
    {
    //让另一个复选框不被选中，并且隐藏table2
    document.getElementById("ck2").checked=false;
    document.getElementById("tab2").style.display="none";

    //显示table1
    document.getElementById("tab1").style.display="";
    }else
    {
    //让另一个复选框不被选中，并且隐藏table2
    document.getElementById("ck1").checked=false;
    document.getElementById("tab1").style.display="none";

    //显示table1
    document.getElementById("tab2").style.display="";
    }
    }
    </script>   
    </head>
    <body>
    <input   type="checkbox"   id="ck1"   onclick="displayTable('ck1')">   
    <input   type="checkbox"   id="ck2"   onclick="displayTable('ck2')">   
    <table   id="tab1"   width=100   height=100   bgcolor="red"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table> 
    <table   id="tab2"   width=100   height=100   bgcolor="blue"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table> 
      </body>
    </html>
      

  4.   


    <script   language=javascript>   
    function   displayTable()   
    {   
    var   oCheck   =   document.getElementById("ck1").checked;   
    var   oTable   =   document.getElementById("tab1");   
    if(oCheck)   
    {   
    oTable.style.display   =   "";  
    document.getElementById("ck2").disabled=true;
    document.getElementById("ck3").disabled=true;
    }   
    else   
    {   
    oTable.style.display   =   "none";   
    document.getElementById("ck2").disabled=false;
    document.getElementById("ck3").disabled=false;
    }   
    }   
    function   displayTable2()   
    {   
    var   oCheck   =   document.getElementById("ck2").checked;   
    var   oTable   =   document.getElementById("tab2");   
    if(oCheck)   
    {   
    oTable.style.display   =   "";   
    document.getElementById("ck1").disabled=true;
    document.getElementById("ck3").disabled=true;
    }   
    else   
    {   
    oTable.style.display   =   "none";   
    document.getElementById("ck1").disabled=false;
    document.getElementById("ck3").disabled=false;
    }   
    }   
    function   displayTable3()   
    {   
    var   oCheck   =   document.getElementById("ck3").checked;   
    var   oTable   =   document.getElementById("tab3");   
    if(oCheck)   
    {   
    oTable.style.display   =   "";   
    document.getElementById("ck1").disabled=true;
    document.getElementById("ck2").disabled=true;
    }   
    else   
    {   
    oTable.style.display   =   "none";   
    document.getElementById("ck1").disabled=false;
    document.getElementById("ck2").disabled=false;
    }   
    }  
    </script>   
    <input   type="checkbox"   id="ck1"   onclick="displayTable()">   
    <input   type="checkbox"   id="ck2"   onclick="displayTable2()">  
    <input   type="checkbox"   id="ck3"   onclick="displayTable3()"> 
    <table   id="tab1"   width=100   height=100   bgcolor="red"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table> 
    <table   id="tab2"   width=100   height=100   bgcolor="blue"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table> 
    <table   id="tab3"   width=100   height=100   bgcolor="black"   style="display:none">   
    <tr> <td>   
    </td> </tr>   
    </table>