radioボタンの選択によって表示切替するJavaScript

フォームのradioボタンの選択によって入力項目を切り替えるJavaScriptを5am! Web Illusions/JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプトを利用して制作しました。（JavaScript超初心者です。。）
上記ページのwindow.onloadの設定を、addEventListenerとattachEventを使用して、他にonloadがあった場合に、スクリプトの上書きを回避できるようにしています。

サンプルはこちら

head内に「selectRadio.js」を読み込む

selectRadio.jsをダウンロードし、head内に読み込む。

<script type="text/javascript" src="selectRadio.js"></script>

htmlのソース

radioボタンをクリックした時に、idによって表示・非表示の切替をするので、要素をそれぞれidで括っておく。
ここではselectRadio01から順にselectRadio04まで。
※selectRadio05は、selectRadio04にネストされているので、この構造が不要ならば削除。

<form action="" method="post" name="form1">
<div id="sampleBox01">
<p>
<label><input type="radio" name="pay" value="1" checked="checked" onClick="selectBtn01();" />当日現金払い</label><br />
<label><input type="radio" name="pay" value="2" onClick="selectBtn01();" />ご請求書（お振込み・商品と共にお届け）</label><br />
<label><input type="radio" name="pay" value="3" onClick="selectBtn01();" />ご請求書（お振込み・後日郵送）</label><br />
<label><input type="radio" name="pay" value="4" onClick="selectBtn01();" />クレジットカード</label>
</p>

<div id="selectRadio01">
<p>領収書の宛名がお客様情報と異なる場合はご入力ください。<br>
また、但し書きにご指定があればご入力ください。</p>
<table summary="">
<tr>
<th>領収書の宛名</th>
<td><input type="text" name="name01" /></td>
</tr>
<tr>
<th>領収書の但し書き</th>
<td><input type="text" name="name02" />　例） ご飲食代 等</td>
</tr>
</table>
<!-- /#selectRadio01 --></div>

<div id="selectRadio02">
<p>請求書の宛名がお客様情報と異なる場合はご入力ください。</p>
<table summary="">
<tr>
<th>請求書の宛名</th>
<td><input type="text" name="name03" /></td>
</tr>
</table>
<!-- /#selectRadio02 --></div>

<div id="selectRadio03">
<p>請求書の送付先がお届け先と異なる場合は送付先をご入力ください。</p>
<table summary="">
<tr>
<th>請求書の宛名</th>
<td><input type="text" name="name04" /></td>
</tr>
<tr>
<th>住所</th>
<td><input type="text" name="name05" /></td>
</tr>
<tr>
<th>会社名</th>
<td><input type="text" name="name06" /></td>
</tr>
</table>
<!-- /#selectRadio03 --></div>

<div id="selectRadio04">
<p>領収書の有無をご選択ください。</p>
<p>
<label><input type="radio" name="existence" value="1" onClick="selectBtn02();" checked="checked" />領収書なし</label><br />
<label><input type="radio" name="existence" value="2" onClick="selectBtn02();" />領収書あり</label>
</p>
<div id="selectRadio05">
<p>領収書の宛名がお客様情報と異なる場合はご入力ください。<br>また、但し書きにご指定があればご入力ください。</p>
<table summary="">
<tr>
<th>領収書の宛名</th>
<td><input type="text" name="name07" /></td>
</tr>
<tr>
<th>領収書の但し書き</th>
<td><input type="text" name="name08" />　例） ご飲食代 等</td>
</tr>
</table>
<!-- /#selectRadio05 /#selectRadio04 --></div></div>
<!-- /#sampleBox01 --></div>
</form>

javascriptのソース

radioボタンのクリック時に表示・非表示をstyle.displayによって切り替える。

htmlで設定したonClick=”selectBtn01();”
getElementsByName(‘pay’)にinputのname属性を入れる。

function selectBtn01(){
	radio = document.getElementsByName('pay')
	if(radio[0].checked) {
		//当日現金払い
		document.getElementById('selectRadio01').style.display = "";
		document.getElementById('selectRadio02').style.display = "none";
		document.getElementById('selectRadio03').style.display = "none";
		document.getElementById('selectRadio04').style.display = "none";
	}else if(radio[1].checked) {
		//ご請求書（お振込み・商品と共にお届け）
		document.getElementById('selectRadio01').style.display = "none";
		document.getElementById('selectRadio02').style.display = "";
		document.getElementById('selectRadio03').style.display = "none";
		document.getElementById('selectRadio04').style.display = "none";
	}else if(radio[2].checked) {
		//ご請求書（お振込み・後日郵送）
		document.getElementById('selectRadio01').style.display = "none";
		document.getElementById('selectRadio02').style.display = "none";
		document.getElementById('selectRadio03').style.display = "";
		document.getElementById('selectRadio04').style.display = "none";
	}else if(radio[3].checked) {
		//クレジットカード
		document.getElementById('selectRadio01').style.display = "none";
		document.getElementById('selectRadio02').style.display = "none";
		document.getElementById('selectRadio03').style.display = "none";
		document.getElementById('selectRadio04').style.display = "";
	}
}

function selectBtn02(){
	radio = document.getElementsByName('existence')
	if(radio[0].checked) {
		//クレジットカード・領収書なし
		document.getElementById('selectRadio05').style.display = "none";
	}else if(radio[1].checked) {
		//クレジットカード・領収書あり
		document.getElementById('selectRadio05').style.display = "";
	}
}

//オンロードさせ、リロード時に選択を保持
//支払方法の選択
try{
	window.addEventListener("load",selectBtn01,false);// IE以外
}catch(e){
	window.attachEvent("onload",selectBtn01);// IE
}
//クレジット・領収書有無
try{
	window.addEventListener("load",selectBtn02,false);// IE以外
}catch(e){
	window.attachEvent("onload",selectBtn02);// IE
}

【参考サイト】
5am! Web Illusions/JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
JavaScript スタイルシートサンプル集／イベントリスナーaddEventListener,attachEventメソッド

コメントを残す