
とても困っているのでお力をお貸しください。
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」のテーブルが選択したラジオボタンによってどちらかひとつ表示される、という風にしたいのですが、教えていただけないでしょうか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
よこやりごめん。
id="b1", id="b2" が、かぶってます
id は、わらえるようなもので、かぶってはいけません。
document.getElementById("TableA").style.display = "display:none;";
は、
document.getElementById("TableA").style.display = "none";
です。
No.1
- 回答日時:
ご提示の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;";
にしても同じでした。
引き続き教えていただけると助かります。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
データベースの値を判断してラ...
-
ラジオボタンにタブインデック...
-
ラジオボタンの選択項目によっ...
-
JavaScript ラジオボタン デ...
-
tabindexの取得
-
指定したタグを書き換えるには?
-
画面表示とともにtableの指定の...
-
プルダウンで選択すると、DBの...
-
【jQuery】input nameの文字列...
-
return trueとreturn falseの用...
-
<JavaScript>tableタグを入力不...
-
onclickが動作しない
-
動的にTabindexの値を変えたい!
-
CSVファイルを読みこみ、プルダ...
-
JSPとJavaScriptの連携について...
-
テキストボックスの値同士を比...
-
どちらかひとつのテキストボッ...
-
<input>の選択肢をプルダウンメ...
-
【jsp/Java】チェックボックス...
-
submitするとなぜか2度実行する
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンにタブインデック...
-
javascript作成してます。ラジ...
-
Javascriptを使って動的にラジ...
-
ラジオボタンでdisabledとchecked
-
ラジオボタンのチェックが外れ...
-
CGI.pmでラジオボタンを思い通...
-
リセットボタンでクリアできな...
-
文字列を表示/非表示させつつ、...
-
データベースの値を判断してラ...
-
ラジオボタンのValueを受け取り...
-
ログ入力支援ツールの作成方法
-
ラジオボタンの選択によってチ...
-
ラジオボタンとif文
-
2項目計算って可能でしょうか?
-
ラジオボタンのチェック数に応...
-
JavaScript フォームでのラジオ...
-
Formのラジオボタンリセット方法
-
チェックボックス とラジオボ...
-
ラジオボタンを使って、検索ペ...
-
【javascript】firefoxでの、al...
おすすめ情報