我们如何隐藏和显示表上的无线电按钮点击

how we hide and show table on radio bullton clicking

本文关键字：无线电 按钮 显示 何隐藏 隐藏 我们      更新时间：2023-09-26

我有两个表。我想在单击第一个单选按钮时显示一个表。然后当我点击第二个单选按钮时显示一个不同的表。

检查:

JQUERY: 

$("#Radio1").click(function(){
    $("#Table2").hide();
    $("#Table1").show();
});
$("#Radio2").click(function(){
    $("#Table1").hide();
    $("#Table2").show();
});
HTML: 

<input type="radio" id="Radio1" name="rd"/>
Click on this radio button to show Table 1
<br />
<input type="radio" id="Radio2" name="rd"/>
Click on this radio button to show Table 2
<br />
<table id="Table1" border="1" cellpadding="0" cellspacing="0" style="display:none;width:200px;">
    <tr>
        <td>11</td>
        <td>11</td>
    </tr>
    <tr>
        <td>11</td>
        <td>11</td>
    </tr>
</table>
<br />
<table id="Table2" border="1" cellpadding="0" cellspacing="0" style="display:none;width:200px;">
    <tr>
        <td>22</td>
        <td>22</td>
    </tr>
    <tr>
        <td>22</td>
        <td>22</td>
    </tr>
</table>

点击这里查看演示

使用jQuery .show() API实现快速、简便和浏览器兼容的解决方案:

$("#radio1").click(function(e){$("#table1").show();});
$("#radio2").click(function(e){$("#table2").show();});
相关文章：