この記事を読むのに必要な時間は約 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を効率的に学習して自在にデザイン・レイアウトができるようになるとWEB制作の幅が一気に広がります。
下記は独学で学習するのにうってつけの良書なので要チェックです！
１冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座/Mana
posted with カエレバ
bookfan PayPayモール店
集中的に学習して本業としてのWEBデザイナーを視野に入れるなら
さらにWEBについて学習したい方、転職を目指されている方はWebデザインスクールで集中的に学ぶ事を視野に入れてみるのは如何でしょうか？現役プロのWEBデザイナーにより手厚いサポートがあるので、安心して最新のWeb開発について学ぶことができます。
まずは説明会や無料カウンセリングで情報を集めて検討されてみるのはいかがでしょうか？
以上、ラジオボタンを使って中身の表示をタブメニューのように切り替える方法についてでした。
通販サイトの支払方法を選択する個所などで使えるパーツです。
ではまた！
他にもコピペで1分あれば実装できるソースを掲載しております。
併せてチェックされてみてはいかがでしょうか？
コピペで1分シリーズ
