チェックボックスをクリックするとテーブルを表示/非表示にし、2番目のチェックボックスをクリックすると別のテーブルを表示して最初のチェックボックスを非表示にしようとしています。
2つのテーブルと2つのチェックボックスがあります。1つは「カスタマイズ」、もう1つは「標準」というラベルが付いています。ページの読み込み時に詳細オプションを使用して「カスタマイズ」テーブルを表示することから始めたいと思います。これは現在実行されていますが、他の選択である「標準」がチェックされている場合はテーブルを非表示にします。これも現在実行されています。
今、私は「標準」オプションのみを表示するために2番目のテーブルを追加することによってそれを拡張しようとしています。私が「標準」と名付けたこのテーブルには、いくつかのオプションしかありませんが、「カスタマイズ」テーブルには多くのオプションがあります。
これを行う方法について何かアイデアはありますか？これが、1つのテーブルのテーブルの表示/非表示機能が機能するこれまでの私のコードです。
私の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>
何か案は？