我试图在隐藏第一个复选框的同时显示/隐藏一个表格，然后显示另一个表格，同时隐藏第一个复选框。
我有两张桌子和两张复选框。一个标记为“定制”，一个标记为“标准”。我想开始显示“自定义”表，其中包含页面加载的高级选项 - 它当前正在执行 - 并在选中其他选项“标准”时隐藏表格 - 它目前也是如此。
现在我试图通过添加第二个表来扩展它，只显示“标准”选项。这个表我命名为“标准”，它只有几个选项，其中“自定义”表有很多。
关于如何做到这一点的任何想法？到目前为止，这是我的代码，其中包含一个表的工作显示/隐藏表功能。
我的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
<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 />
<input type="checkbox" name="checkbox7" id="checkbox15" disabled="disabled" />
Category Full Path <br />
<input type="checkbox" name="checkbox7" id="checkbox16" disabled="disabled" />
Group by Parent<br />
<input type="checkbox" name="checkbox14" id="checkbox17" disabled="disabled" />
Category Mean<br />
<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 />
<input type="checkbox" name="checkbox7" id="checkbox15" disabled="disabled" />
Category Full Path <br />
<input type="checkbox" name="checkbox7" id="checkbox16" disabled="disabled" />
Group by Parent<br />
<input type="checkbox" name="checkbox14" id="checkbox17" disabled="disabled" />
Category Mean<br />
<input type="checkbox" name="checkbox14" id="checkbox18" disabled="disabled" />
Category Std Dev
</td>
</tr>
</table>
</div>
有什么想法吗？
答案 0 :(得分：4)
如果稍微删除你的代码并为你创建一个小提琴，这应该可以让你开始：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
<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。
答案 1 :(得分：0)
您可以在两个表中添加一个类，并使用getElementsByClassName而不是getElementById
选择它们 <table class="standard expand" ... >