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

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

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

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

この記事の目次

デモ

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

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

クリエイターへの就職・転職成功率を劇的に上げるエージェント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>

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。