我正在尝试在单击复选框时显示/隐藏表格,并在单击第二个复选框时显示另一个表格,同时隐藏第一个复选框。
我有两个表格和两个复选框。一种标记为“定制”,一种标记为“标准”。我想开始在页面加载时显示带有高级选项的“自定义”表格 - 它目前正在执行 - 并在选中其他选项“标准”时隐藏表格 - 它目前也是如此。
现在我试图通过添加第二个表来扩展它以仅显示“标准”选项。这个表我命名为“标准”,它只有几个选项,而“自定义”表有很多。
关于如何去做这件事的任何想法?到目前为止,这是我的代码,其中一个表的工作显示/隐藏表功能。
我的 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>
有任何想法吗?