javascriptについて

初心者ですが、javascriptを使い簡単なツールを作成したいです。
作りたいおおまかな内容は、
ラジオボタンの選択による表示内容の切り替えを2段階でできるのようにしたいのですが、どのようにすればよいのでしょうか？わかりにくい説明で申し訳ありませんが、御回答お願いします！

サンプル⇩（最初のラジオボタンで切り替わった画面に、ラジオボタンを作り、選択するとさらに表示内容が切り替わるようにしたい）

<input type="radio" name="msg_type" id="radio1">A表示<br>
<input type="radio" name="msg_type" id="radio2">B表示<br>
<br>
<div id="div_msg1" style="display:none">
ラジオボタンC ラジオボタンD を作成したい
</div>
<div id="div_msg2" style="display:none">
ラジオボタンE ラジオボタンF を作成したい
</div>
<script language="JavaScript">
radio1.onclick = f;
radio2.onclick = f;

function f()
{
if( radio1.checked )
{
div_msg1.style.display = "";
div_msg2.style.display = "none";
}
else
{
div_msg1.style.display = "none";
div_msg2.style.display = "";
}
}
</script>

質問者からの補足コメント

• 

  御回答ありがとうございます。
  できれば、サンプルとしてjavascriptを記述して頂けると助かるのですが、、

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/11/10 10:25

• 御回答本当にありがとうございます！
  試してみたのですが、ラジオボタンを選択しても表示が切り変わりません。
  どうしたらよいか教えて頂けると助かります！

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/11/12 17:40

No.2 回答者： Ogre7077 回答日時： 2016/11/10 10:55

こんなかんじでしょうか

<style>
.optional { display: none; }
.optional.chosen { display: block; }
</style>

<script>(function(_){

_ ; function A(a){return Array.prototype.slice.apply(a)}
_ ; function QQ(s,b){return A((b?b:document).querySelectorAll(s))}
_ ; function C(e, tag){while (e && e.tagName != tag.toUpperCase()) e = e.parentNode; return e}

_ ; // フォーム内容で表示を切り替え
_ ; function refineDisplay(form) {
_ ; _ ; function check(e,t,m){return t && e.classList.contains('type' + t) || m && e.classList.contains('model' + m)};
_ ; _ ; // 選択によって切り替え
_ ; _ ; var t = form.elements['t'].value, m = form.elements['m'].value;
_ ; _ ; QQ('.optional').forEach(function(e){e.classList.toggle('chosen', check(e,t,m))});
_ ; _ ; // 非表示になったら選択は初期化
_ ; _ ; QQ('.optional:not(.chosen) input').forEach(function(e){ if ((e.name == 't' || e.name == 'm') && e.checked) e.checked = false });
_ ; _ ; // 初期化されたので再度切り替え
_ ; _ ; t = form.elements['t'].value, m = form.elements['m'].value;
_ ; _ ; QQ('.optional.chosen').forEach(function(e){e.classList.toggle('chosen', check(e,t,m))});
_ ; }

_ ; // 最初から選択がある場合
_ ; window.addEventListener('DOMContentLoaded', function(ev){
_ ; _ ; refineDisplay(document.forms['refinement']);
_ ; }, false);

_ ; // ユーザー操作で選択が変わった場合
_ ; window.addEventListener('change', function(ev){
_ ; _ ; var form = C(ev.target, 'form');
_ ; _ ; if (form && form.name == 'refinement') refineDisplay(form);
_ ; }, false);

})()</script>

<form name=refinement>
<ul>
<li><label><input type=radio name=t value=A>type.A</label>
<li><label><input type=radio name=t value=B>type.B</label>
</ul>
<ul class='optional typeA'>
<li><label><input type=radio name=m value=C>model.C</label>
<li><label><input type=radio name=m value=D>model.D</label>
</ul>
<ul class='optional typeB'>
<li><label><input type=radio name=m value=E>model.E</label>
<li><label><input type=radio name=m value=F>model.F</label>
</ul>
<p class='optional modelC'>content of type.A model.C
<p class='optional modelD'>content of type.A model.D
<p class='optional modelE'>content of type.B model.E
<p class='optional modelF'>content of type.B model.F
</form>

No.1 回答者： zircon3 回答日時： 2016/11/10 08:25

ラジオボタンは普通にHTMLの記述です。

で、「ラジオボタンを選択された（またはクリックされた）際に、そのイベントをひろってあるURLの内容を表示する」という動作をJavascriptで書けばよいです。
イベントのひろい方はJavascriptの解説本や解説サイトを参照されればよいです。
解説サイトはGoogleなどで「javascript 初心者」とか「javascript 入門」といった適当なキーワードで検索するとたくさん見つかりますから、それらを幾つか参照してご自身が「このサイトが分かりやすい」というところを選ばれるとよいでしょう。

参考まで。