javascript - 单击复选框时显示/隐藏两个表格

Question

我正在尝试在单击复选框时显示/隐藏表格，并在单击第二个复选框时显示另一个表格，同时隐藏第一个复选框。

我有两个表格和两个复选框。一种标记为“定制”，一种标记为“标准”。我想开始在页面加载时显示带有高级选项的“自定义”表格 - 它目前正在执行 - 并在选中其他选项“标准”时隐藏表格 - 它目前也是如此。

现在我试图通过添加第二个表来扩展它以仅显示“标准”选项。这个表我命名为“标准”，它只有几个选项，而“自定义”表有很多。

关于如何去做这件事的任何想法？到目前为止，这是我的代码，其中一个表的工作显示/隐藏表功能。

我的 JavaScript：

<script type="text/javascript">
<!--
function showTable(which)
{
    if(which == "1") {
        document.getElementById('customize').style.display = "table";
        }
        if(which == "2") {
        document.getElementById('customize').style.display = "none";
        }
}
//-->
</script>

我的 HTML：

<input name="radio" type="radio" id="customize_1" onClick="showTable('2')" value="radio" />
                  <label for="radio3"></label>
Standard
        &nbsp;&nbsp;&nbsp;
        <input name="radio" type="radio" id="customize_0" onClick="showTable('1')" value="radio" checked="checked" /> 
        Customize
</span></td>
                </tr>
                <tr>
                  <td colspan="5" nowrap="nowrap" class="formlabel">Password: 
                    <input type="password" name="textfield2" id="textfield2" class="fields" size="15" /></td>
                </tr>
</table>
<br />
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
                <tr>
                  <th valign="top" class="header" nowrap="nowrap">Scores</th>
                  <th colspan="3" valign="top" nowrap="nowrap" class="header">Exam Options</th>
                  <th valign="top" nowrap="nowrap" class="header">Categories</th>
                </tr>
                <tr>
                  <td valign="top" class="formlabel" nowrap="nowrap"><input type="checkbox" name="checkbox3" id="checkbox4" />
                    Exam Score (Pts)<br />
  <input type="checkbox" name="checkbox3" id="checkbox5" />
                    Letter Grade<br />
  <input type="checkbox" name="checkbox4" id="checkbox7" />
                    Percentage<br />
                    <input type="checkbox" name="checkbox12" id="checkbox19" /> 
                    Raw Score (# Correct)
</td>
                  <td valign="top" class="formfield" nowrap="nowrap"><span class="formlabel">
                    <input type="checkbox" name="checkbox15" id="checkbox20" />
Statistics (Mean, Median, Std Dev)<br />
<input type="checkbox" name="checkbox15" id="checkbox21" />
Rank<br />
<input type="checkbox" name="checkbox15" id="checkbox22" />
Percentage Rank<br />
<input type="checkbox" name="checkbox15" id="checkbox23" />
Item Text </span></td>
                  <td valign="top" class="formfield" nowrap="nowrap"><span class="formlabel">
                  <input type="checkbox" name="checkbox13" id="checkbox24" /> 
Item Description
<br />
<input type="checkbox" name="checkbox13" id="checkbox25" /> 
Answer Choice Text
</span><br />
<span class="formlabel">
<input type="checkbox" name="checkbox16" id="checkbox2" />
Answer Key<br />
<input type="checkbox" name="checkbox16" id="checkbox26" />
Wrong Answer Only</span></td>
                  <td valign="top" nowrap="nowrap" class="formfield"><span class="formlabel">
                  <input type="checkbox" name="checkbox" id="checkbox10" />
                    Rationale<br />
  <input type="checkbox" name="checkbox6" id="checkbox11" />
                    Actual Item Sequence<br />
  <input type="checkbox" name="checkbox6" id="checkbox12" /> 
  Essay Responses<br />
  <input type="checkbox" name="checkbox6" id="checkbox13" />
                    Essay Grader Comments</span></td>
                  <td valign="top" nowrap="nowrap" class="formfield"><input type="checkbox" name="checkbox7" id="checkbox14" />
                    Performance in Each Category<br />
                    <a href="" class="buttonintable basicAddCategory3" title="Select categories">Select Category</a>
<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox15" disabled="disabled" />
                    Category Full Path <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox16" disabled="disabled" />
                    Group by Parent<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="checkbox14" id="checkbox17" disabled="disabled" />
                    Category Mean<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="checkbox14" id="checkbox18" disabled="disabled" /> 
Category Std Dev
</td>
                </tr>
      </table>
      <div style="display:none">
      <table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard">
                <tr>
                  <th valign="top" class="header" nowrap="nowrap">Categories</th>
                </tr>
                <tr>
      <td valign="top" nowrap="nowrap" class="formfield"><input type="checkbox" name="checkbox7" id="checkbox14" />
                    Performance in Each Category<br />
                    <a href="" class="buttonintable basicAddCategory3" title="Select categories">Select Category</a>
<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox15" disabled="disabled" />
                    Category Full Path <br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="checkbox" name="checkbox7" id="checkbox16" disabled="disabled" />
                    Group by Parent<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" name="checkbox14" id="checkbox17" disabled="disabled" />
                    Category Mean<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="checkbox14" id="checkbox18" disabled="disabled" /> 
Category Std Dev
</td>
                </tr>
      </table>
      </div>

有任何想法吗？

Answer 1

如果稍微剥离你的代码并为你创建一个小提琴，这应该让你开始：http: //jsfiddle.net/4tcRD/

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="radio" type="radio" id="customize_1" onClick="toggleTables('2')" value="radio" />
<label for="radio3"></label> Standard&nbsp;&nbsp;&nbsp;
<input name="radio" type="radio" id="customize_0" onClick="toggleTables('1')" value="radio" 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>​

您的问题是桌子周围的 div 设置为display: none.

Answer 2

您可以向这两个表添加一个类并使用 getElementsByClassName 而不是 getElementById 选择它们

 <table class="standard expand" ... >