Javascript 单击复选框后显示/隐藏两个表
我试图在隐藏第一个复选框的同时，在单击复选框时显示/隐藏一个表，并在单击第二个复选框时显示另一个表 我有两张桌子和两个复选框。一个标签为“定制”，另一个标签为“标准”。我想首先在页面加载上显示“定制”表，其中包含高级选项，它当前正在执行此操作，并在选中其他选项“标准”时隐藏该表，它当前也在执行此操作 现在，我试图通过添加第二个表来扩展它，以仅显示“标准”选项。这个表我命名为“standard”，它只有几个选项，其中“customize”表有很多选项 你知道怎么做吗？这是我到目前为止使用一个表的显示/隐藏表功能的代码 我的JavaScript：Javascript 单击复选框后显示/隐藏两个表,javascript,html,html-table,onclick,Javascript,Html,Html Table,Onclick,我试图在隐藏第一个复选框的同时，在单击复选框时显示/隐藏一个表，并在单击第二个复选框时显示另一个表 我有两张桌子和两个复选框。一个标签为“定制”，另一个标签为“标准”。我想首先在页面加载上显示“定制”表，其中包含高级选项，它当前正在执行此操作，并在选中其他选项“标准”时隐藏该表，它当前也在执行此操作 现在，我试图通过添加第二个表来扩展它，以仅显示“标准”选项。这个表我命名为“standard”，它只有几个选项，其中“customize”表有很多选项 你知道怎么做吗？这是我到目前为止使用一个表的显
<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>
<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>
标准
定制
密码：
分数
考试选项
类别
考试分数（Pts）
字母等级
百分比
原始分数（#正确）
统计数据（平均值、中位数、标准偏差）
排名
百分比等级
项目文本
项目说明
答案选择文本
应答键
只答错了
基本原理
实际项目顺序
论文回复
论文评分员评论
各类别的绩效
类别完整路径
按家长分组
类别平均值
类别标准开发
类别
各类别的绩效
类别完整路径
按家长分组
类别平均值
类别标准开发
有什么想法吗？您可以向两个表中添加一个类，并使用GetElementsByCassName而不是getElementById来选择它们
<table class="standard expand" ... >
您可以向这两个表中添加一个类，并使用GetElementsByCassName而不是getElementById来选择它们
<table class="standard expand" ... >
如果将代码精简一点，为您创建一个提琴，您应该可以开始： 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";
}
}
<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:nonefunction 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";
}
}
<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>
标准
定制
定制
标准
display:none