jsでラジオボタンによって表示内容を変えたい

質問

とても困っているのでお力をお貸しください。

HTML側に
====================================================
<table summary="条件問題">
<tr>
<th>問題1</th>
<td>
<ul>
<li><input type="radio" name="AAAAAA" value="あああ" id="a1" onclick="mondaiChange1();"/>
<label for="a1"> あああ</label></li>
<li><input type="radio" name="AAAAAA" value="いいい" id="a2" onclick="mondaiChange1();"/>
<label for="a2"> いいい</label></li>
<li><input type="radio" name="AAAAAA" value="ううう" id="a3" onclick="mondaiChange1();"/>
<label for="a3"> ううう</label></li>
<li><input type="radio" name="AAAAAA" value="えええ" id="a4" onclick="mondaiChange1();"/>
<label for="a4"> えええ</label></li>
<li><input type="radio" name="AAAAAA" value="おおお" id="a5" onclick="mondaiChange1();"/>
<label for="a5"> おおお</label></li>
</ul>
</td>
</tr>
</table>

<div class="TableA">
<table summary="問題その2" id="TableA">
<tr>
<th>Q1</th>
<td>
<ul>
<li>
<input type="radio" value="はい" id="b1" name="BBBBBBB" />
<label for="b1"> はい</label>
</li>
<li>
<input type="radio" value="いいえ" id="b2" name="BBBBBBB" />
<label for="b2"> いいえ</label>
</li>
</ul></td>
</tr>
</table>

<div class="TableB">
<table summary="問題その2" id="TableB">
<tr>
<th>Q1</th>
<td>
<ul>
<li>
<input type="radio" value="はい" id="b1" name="BBBBBBB" />
<label for="b1"> はい</label>
</li>
<li>
<input type="radio" value="いいえ" id="b2" name="BBBBBBB" />
<label for="b2"> いいえ</label>
</li>
</ul></td>
</tr>
</table>
==========================

と記載。
includeしているjsファイル側に
==========================
function mondaiChange1(){
radio = document.getElementsByName('AAAAAA')
if(radio["a1"].checked) {
//フォーム
document.getElementById("TableA").style.display = "none";
document.getElementById("TableB").style.display = "";
}
else if(radio["a2"].checked) {
//フォーム
document.getElementById("TableA").style.display = "";
document.getElementById("TableB").style.display = "none";
}
else if(radio["a3"].checked) {
//フォーム
document.getElementById("TableA").style.display = "none";
document.getElementById("TableB").style.display = "";
}
else if(radio["a4"].checked) {
//フォーム
document.getElementById("TableA").style.display = "";
document.getElementById("TableB").style.display = "none";
}
else if(radio["a5"].checked) {
//フォーム
document.getElementById("TableA").style.display = "none";
document.getElementById("TableB").style.display = "";
}
//オンロードさせ、リロード時に選択を保持
window.onload = mondaiChange1;
}
==========================

としているのですが、これだと最初にアクセスしたとき
問題その2のTableAとTableB両方のテーブルが表示されてしまいます。
（その後ラジオボタンを選択すると希望通りの動作になります。）

//オンロードさせ、リロード時に選択を保持
window.onload = mondaiChange1;

を入れたら大丈夫というのをネットで見たのですが、どう書き換えてもうまくいきません。

希望としては
最初にアクセスしたときは問題1の回答は何も選択されてない状態で、その下には何も表示されていない。
↓
問題1の選択肢を選択した時点で初めて「問題その2」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか？

回答No.2

babu_baboo

よこやりごめん。

id="b1", id="b2" が、かぶってます
id は、わらえるようなもので、かぶってはいけません。

document.getElementById("TableA").style.display = "display:none;";
は、
document.getElementById("TableA").style.display = "none";
です。

お礼

ありがとうございました。

結局解決はしませんでしたが、IDの件、とても参考になりました。

回答No.1

fujillin

ご提示のonloadの使い方では全く役にたちません。
そのスクリプトが実行されるのは、基本的にonloadイベント後なので…

最初に表示したくなければ、その要素をCSSでdisplay:noneに設定しておけばよろしいかと。
スクリプトを無効にしているユーザだと表示できなくなってしまいますが、そもそもがスクリプトが動作しなければ成立しないようになっているので問題にはならないでしょう。
　style="display:none;"

あるいは、スクリプトで非表示にしておきたい要素を非表示に設定するのでもよろしいかと。
（ご提示のコードで実行している処理内容とほぼ同じ）
このときは、『一番最初に』実行する必要があるので、その内容を

　window.onload = function(){
　　// ここに初期設定で実行したい処理を書く
　}

のようにすればできると思います。

補足

早速のご回答ありがとうございます。

一番最初に書かないといけないのですね！

早速、
＝＝＝＝＝＝＝＝＝＝＝＝
window.onload = function(){
　　// 初期設定
document.getElementById("TableA").style.display = "display:none;";
document.getElementById("TableB").style.display = "display:none;";
}
＝＝＝＝＝＝＝＝＝＝＝＝

をjsファイルの一番上に記載してみたのですが
まったく変わりません・・・・

何か書き方がおかしいのでしょうか？
document.getElementById("TableA").style.display = "none;";
document.getElementById("TableB").style.display = "none;";

にしても同じでした。

引き続き教えていただけると助かります。
よろしくお願いします。