【问题标题】:I want to show tables when radio buttons are selected我想在选择单选按钮时显示表格
【发布时间】:2013-01-02 16:49:17
【问题描述】:

我正在尝试显示几个复选框的 onClick 或 onSelect 表格​​。 I have a checkbox for 'standard' which, when selected, should display a table of standard options, and I have a checkbox for 'customized' which, when selected, should display a table of customized options.

现在表格会切换,但不会同时显示。换句话说,如果两者都被选中,我需要显示两个表,一个在另一个之下。如果仅选中“标准”,则仅显示“标准”选项,如果仅选中“自定义”,则仅显示“自定义”选项。

这是一个小提琴:http://jsfiddle.net/4tcRD/2/

这是我的 JS:

function toggleTables(which)
{

    if(which == "1") {
        document.getElementById('customize').style.display = "table";
        document.getElementById('standard').style.display = "none";

        }
    if(which == "2") {
        document.getElementById('standard').style.display = "table";
        document.getElementById('customize').style.display = "none";

        }
}

这是我的 HTML:

<input name="checkbox1" type="checkbox" id="customize_1" onClick="toggleTables('2')" value="checkbox" />
<label for="checkbox1"></label> Standard&nbsp;&nbsp;&nbsp;
<input name="checkbox2" type="checkbox" id="customize_0" onClick="toggleTables('1')" value="checkbox" checked="checked" />
Customize


<br />
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
    <tr><td>customize</td></tr>                   
</table>

<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
    <tr><td>standard</td></tr>                   
</table>

请帮帮我。 - 使用复选框更新**

【问题讨论】:

  • 如果您使用单选按钮,您希望如何一次选择两个?使用复选框。
  • 在您的 html 中,您使用的是单选按钮,而您说的是复选框?哪个 1 是正确的?
  • 即使在函数 toggletable() 中,如果您同时选择两者,您将传递什么值?你还没有为两者写任何东西..

标签: javascript html toggle show-hide


【解决方案1】:

可以只检查函数内复选框的状态。

function toggleTables()
{
    var isCustomize = document.getElementById('customize_1').checked; 
    var isStandard = document.getElementById('standard_1').checked;  

    var customize = document.getElementById('customize'); 
    var standard = document.getElementById('standard');    

    customize.style.display = isCustomize  ? 'table' : 'none';
    standard.style.display = isStandard  ? 'table' : 'none';
}​

http://jsfiddle.net/4tcRD/3/

【讨论】:

  • 工作就像一个魅力!谢谢!
猜你喜欢
  • 2014-02-06
  • 2021-02-16
  • 2013-09-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-19
  • 2013-07-28
  • 2018-01-01
相关资源
最近更新 更多