指定のラジオボタンをチェックすると、さらに追加で項目を表示します

デモページへopen_in_new

JSを読み込みます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/main.js"></script>

[main.js]JavaScript

//選択されたら表示
$(function(){
$(".Form__radio dd").each(function() {
//命令
  var Set = $(this);
  var selectlabel = $(this).find("label.select");
  var closelabel = $(this).find("label.close");
  var selectitem = $(this).find("label.select input");
  var morearea = $(this).find(".Inputmore");
  var moreinput = $(this).find(".Inputmore input");
  var moreinputselect = $(this).find(".Inputmore select");
  //初期化
  $(moreinput).attr("checked", false);
  $(morearea).css("display", "none");

    $([selectlabel[0] , closelabel[0]]).click(function(){
     if($(selectitem).prop('checked')){
     $(morearea).slideDown();
                }else{
      $(moreinput).attr("checked", false);
      $(morearea).slideUp();
      $(moreinputselect).val("選択");
        }
 });
});
});

HTMl

<form action="">
<div class="Form">
<dl class="Form__radio">
<dt id="room">自分の部屋に窓はありますか？</dt>
<dd>
<div role="radiogroup">
<label class="select" for="room_ｙ"><input name="room" type="radio" value="有ります" id="room_ｙ" aria-describedby="room"/>有ります</label>
<label class="close" for="room_n"><input name="room" type="radio" value="無いです" id="room_n" aria-describedby="room"/>無いです</label>
</div>
<div class="Inputmore">
<p>有る場合は、下記も選択してください。</p>
<dl>
<dt><label for="color">どんな色のカーテンを使っていますか？</label></dt>
<dd>
<select id="color">
<option value="選択" selected="selected">--選択してください--</option>
<option value="赤色系">赤色系</option>
<option value="オレンジ色系">オレンジ色系</option>
<option value="白色系">白色系</option>
<option value="青色系">青色系</option>
<option value="緑色系">緑色系</option>
<option value="紫色系">紫色系</option>
<option value="黄色系">黄色系</option>
<option value="黒色系">黒色系</option>
<option value="柄物のカーテン">柄物のカーテン</option>
</select></dd>
</dl>
<!-- /.Inputmore --></div>
</dd>
</dl>

<dl class="Form__radio">
<dt id="roomsofa">自分の部屋にソファはありますか？</dt>
<dd>
<div role="radiogroup">
<label class="select" for="roomsofa_ｙ"><input name="roomsofa" type="radio" value="有ります" id="roomsofa_ｙ" aria-describedby="roomsofa"/>有ります</label>
<label class="close" for="roomsofa_n"><input name="roomsofa" type="radio" value="無いです" id="roomsofa_n" aria-describedby="roomsofa"/>無いです</label>
</div>
<div class="Inputmore">
<p>有る場合は、下記も選択してください。</p>
<dl>
<dt><label for="color02">どんな色のソファですか？</label></dt>
<dd>
<select id="color02">
<option value="選択" selected="selected">--選択してください--</option>
<option value="赤色系">赤色系</option>
<option value="オレンジ色系">オレンジ色系</option>
<option value="白色系">白色系</option>
<option value="青色系">青色系</option>
<option value="緑色系">緑色系</option>
<option value="紫色系">紫色系</option>
<option value="黄色系">黄色系</option>
<option value="黒色系">黒色系</option>
<option value="柄物のカーテン">柄物のカーテン</option>
</select></dd>
</dl>
<!-- /.Inputmore --></div>
</dd>
</dl>

<!-- /.Form --></div>
</form>

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form>dl{
  margin: 0 0 40px 0;
}
.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  padding: 10px;
}
.Inputmore {
  margin: 10px 0 0 0;
}