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

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

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

コピペすると一瞬で実装ができます！

この記事の目次

デモ

ラジオボタンを使ったタブ切り替えのデモです。

デザインしやすいよう、ほとんど装飾をしていない状態の基本形にしています。
コピペしてコチラをベースにデザインを追加してください。

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

クリエイターへの就職・転職成功率が高いエージェント5選

クリエイターへの就職・転職を目指すにはリクナビやen転職など、大手だけでは役不足です。
コチラの記事で私が転職の際に活用し、複数内定を獲得したクリエイティブ系に強い転職エージェントを徹底解説！
フリーランス志望の方、収入を増やしたい方に必須のエージェントはコチラの記事で解説しています。

ソースコード

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

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>