fantiaはじめました!無料素材やAI、PSDを配布中です。

【コピペで1分】ラジオボタンで内容の表示が切り替わる方法

この記事を読むのに必要な時間は約 10 分です。

ラジオボタンで表示内容を切り替える方法を掲載しております。
複数の支払方法を含んだサイトを制作する際によく使うパーツです。
コピペすると一瞬で実装ができます!

デモ

ほとんど装飾をしていない状態の基本形です。
コピペしてコチラをベースに流用してください。

各内容に支払方法の入力エリアがあるフォーム、ありますよね。
そういったページ制作に使えます。

ソースコード

デモと同じ内容のソースコードを掲載しています。

HTML

<form name="radio_sample" id="radio_id">
	<div class="radio_container1">
		<div><label><input type="radio" name="radio_change" id="radio_change" value="0" onClick="rdo(this);"> ラジオボタンA</label></div>
		<div class="radio_inner"><span name="0" id="0" style="display:none;">ラジオ1をオンにした時の中身</span></div>
	</div>
	<div class="radio_container2">
		<div><label><input type="radio" name="radio_change" id="radio_change" value="1" onClick="rdo(this);"> ラジオボタンB</label></div>
		<div class="radio_inner"><span name="1" id="1" style="display:none;">ラジオ2をオンにした時の中身</span></div>
	</div>
	<div class="radio_container2">
		<div><label><input type="radio" name="radio_change" id="radio_change" value="2" onClick="rdo(this);"> ラジオボタンC</label></div>
		<div class="radio_inner"><span name="2" id="2" style="display:none;">ラジオ3をオンにした時の中身</span></div>
	</div>
	<div class="radio_container3">
		<div><label><input type="radio" name="radio_change" id="radio_change" value="3" onClick="rdo(this);"> ラジオボタンD</label></div>
		<div class="radio_inner"><span name="3" id="3" style="display:none;">ラジオ3をオンにした時の中身</span></div>
	</div>
</form>

CSS

.radio_container1{
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: hidden;
	padding:10px;
}
.radio_container2{
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: hidden;
	padding:10px;
}
.radio_container3{
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding:10px;
}
.radio_inner{
	padding:0 25px;
}

Javascript

<script language="javascript">
	function rdo(naka3){
		var naka=document.radio_sample.radio_change.length - 0;
		var naka2=naka3.value;
		if(naka3.checked){
		for(naka4=0;naka>naka4;naka4++){
		var naka5=""+naka4;
		document.getElementById(naka5).style.display="none";
		}
		document.getElementById(naka2).style.display="inline";
		}
	}
</script>

HTML・CSS・JSを効率的に学ぼう

独学にオススメの書籍

HTMLとCSSを効率的に学習して自在にデザイン・レイアウトができるようになるとWEB制作の幅が一気に広がります。
下記は独学で学習するのにうってつけの良書なので要チェックです!

集中的に学習して本業としてのWEBデザイナーを視野に入れるなら

さらにWEBについて学習したい方、転職を目指されている方はWebデザインスクールで集中的に学ぶ事を視野に入れてみるのは如何でしょうか?現役プロのWEBデザイナーにより手厚いサポートがあるので、安心して最新のWeb開発について学ぶことができます。
まずは説明会や無料カウンセリングで情報を集めて検討されてみるのはいかがでしょうか?

おわりに

以上、ラジオボタンを使って中身の表示をタブメニューのように切り替える方法についてでした。
通販サイトの支払方法を選択する個所などで使えるパーツです。

ではまた!

おすすめ記事

他にもコピペで1分あれば実装できるソースを掲載しております。
併せてチェックされてみてはいかがでしょうか?