Javascriptによるフォームの選択表示について教えてください。

質問

Javascriptによるフォームの選択表示について教えてください。

概要としてはカートCGIのお客様情報入力欄のカスタマイズを行なっています。
別の場所への発送を希望される場合において(1)、(2)、(3)のラジオボタンを作り、それぞれ選択によって該当のフォームを表示するところまではできました。

問題は、(1)→１箇所、(2)→３箇所、(3)→５箇所とフォームを作ったところ、入力ページが表示された時点で(1)(2)(3)全ての表示がされた状態で表示されます。
ちなみに、その際にラジオボタンを選択すると(1)(2)(3)それぞれに対応したフォームが表示され切り替わります。

実際にやりたいことは、ページが表示された時点で(1)のフォームのみ表示されるようにし、(2)(3)とラジオボタンを選択された際にそこで初めて(2)(3)のそれぞれのフォームを表示したいと思っています。

以下はソースです。

■Javascript

<script type="text/javascript">
function func1() {
document.getElementById("sele1").style.display="inline";
document.getElementById("sele1").disabled=false;
document.getElementById("sele2").style.display="none";
document.getElementById("sele2").disabled=true;
document.getElementById("sele3").style.display="none";
document.getElementById("sele3").disabled=true;
}
function func2() {
document.getElementById("sele1").style.display="none";
document.getElementById("sele1").disabled=true;
document.getElementById("sele2").style.display="inline";
document.getElementById("sele2").disabled=false;
document.getElementById("sele3").style.display="none";
document.getElementById("sele3").disabled=true;
}
function func3() {
document.getElementById("sele1").style.display="none";
document.getElementById("sele1").disabled=true;
document.getElementById("sele2").style.display="none";
document.getElementById("sele2").disabled=true;
document.getElementById("sele3").style.display="inline";
document.getElementById("sele3").disabled=false;
}
</script>

■CGI(HTML)側

<form action="xxx">
<table border=0 cellpadding=5 cellspacing=2 width=500>
<p>発送先が２箇所以上の場合はこちらから選択ください。
<input type="radio" value="1" onclick="func1('block')" />１箇所</label>
<input type="radio" value="2" onclick="func2('none')" />２箇所</label>
<input type="radio" value="3" onclick="func3('none')" />５箇所</label>
</p>
</table>
<table id="sele1">
</table>
<table id="sele2">
</table>
<table id="sele3">
</table>
</form>
table内容は省略しています。

説明が下手ですがどうかご教授ください。宜しくお願いします。

回答No.1

すもあん（@ryoyama） · ベストアンサー

idが"sele2","sele3"になっている<table>タグにstyle属性を追加して"display:none"を指定しておけばいいと思いますよ。

<table id="sele2" style="display:none">
</table>
<table id="sele3" style="display:none">
</table>

お礼

おかげさまで思い通りにいきました。
ご親切にアドバイスを頂きありがとうございます。