第四十一回「ラジオボタンで表示を切り替える」

ラジオボタンで切り替えれるテンプレートを共有します。

こんな感じで表示されます。

。

■HPで音楽を奏でる方法

1.「head」の中に、下記scriptを記入します。

	<script type="text/javascript">
	function entryChange1(){
	radio = document.getElementsByName('entryPlan')
	if(radio[0].checked) {
	document.getElementById('firstBox').style.display = "";
	document.getElementById('secondBox').style.display = "none";
	}else if(radio[1].checked) {
	document.getElementById('firstBox').style.display = "none";
	document.getElementById('secondBox').style.display = "";
	}
	}
	window.onload = entryChange1;
	</script>

view raw gistfile1.txt hosted with by GitHub

2.「body」の中に、コードを記入します。。

	<form id="mailformpro" action="mailformpro/mailformpro.cgi" method="POST">
	<table border="0" cellspacing="0" cellpadding="0">
	<dl>
	<dt>表示ボタン</dt>
	<dd>
	<label>
	<input type="radio" name="entryPlan" value="hoge1" onclick="entryChange1();" checked="checked" />
	ボタンA</label>
	<label>
	<input type="radio" name="entryPlan" value="hoge2" onclick="entryChange1();" />
	ボタンB</label>
	</dd>
	</dl>
	<!-- 表示切り替えfirstBox -->
	<dl id="firstBox">
	<dl class="mailform">
	<dt>備考欄</dt>
	<dd> ボタンAの時の文字が出ます。
	</dl>
	</dl>
	<!-- 表示切り替えsecondBox -->
	<dl id="secondBox">
	<dl class="mailform">
	<dt>備考欄</dt>
	<dd> ボタンBの時の文字が出ます。 </dd>
	</dl>
	</dl>
	</table>
	</form>

view raw gistfile1.txt hosted with by GitHub

3.「firstBox」と「secondBox」の中にそれぞれ表示させたい文字を挿入します。

★完成★

お問合せフォーム等で分岐したい案件があった場合に活用しましょう！