※ ChatGPTを利用し、要約された質問です（原文：2段階ラジオボタン後、DIVを表示したい）
バスと電車の条件選択フォームを作成する方法
このQ&Aのポイント
バスと電車の条件選択フォームを作成する方法について詳しく説明します。
javascriptのif構文やswitch構文を使用して、2段階のラジオボタンとDIVを連動させる方法を解説します。
ラジオボタンの選択に応じて、詳細条件が表示されるように設定します。
色々と自力で試行錯誤しましたが、知識が足りません。
javaScriptのif構文とかswich構文の部分が問題かなぁ～と推測しますが、自力で構文を認識・改造が出来ませんので、ご指導をお願い致します。
1段目（ラジオ）＜バス＞＜電車＞
2段目（ラジオ）＜バス/高級＞＜バス/普通＞
2段目（ラジオ）＜電車/高級＞＜電車/普通＞
3段目（DIV）＜高級バス＞＜バス＞＜高級電車＞＜電車＞
2段目の動作がオカシイです。
連動している一方のみを表示したいです。（連動してないその他は、見えなくしたいです）
以下、ソースです。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<style type="text/css">
.second , .third{
display: none;
}
</style>
<script type="text/javascript"><!--
function AllHide() {
document.getElementById('bus_high').style.display = 'none';
document.getElementById('bus_normal').style.display = 'none';
document.getElementById('train_high').style.display = 'none';
document.getElementById('train_normal').style.display = 'none';
}
function SetSubMenu( idname ) {
AllHide();
if( idname != "" ) {
document.getElementById(idname).style.display = 'block';
}
}
// --></script>
</head>
<body>
<form action="">
<label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(value);">バス</label>
<label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(value);">電車</label>
</form>
<form action="">
<div class="second" id="bus">
<label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu(value);">バス/高級</label>
<label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu(value);">バス/普通</label>
</div>
<div class="second" id="train">
<label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu(value);">電車/高級</label>
<label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu(value);">電車/普通</label>
</div>
</form>
<div class="third" id="bus_high">高級バス</div>
<div class="third" id="bus_normal">バス</div>
<div class="third" id="train_high">高級電車</div>
<div class="third" id="train_normal">電車</div>
</body>
</html>
お礼
有難うございます。理想の結果を得るスクリプトとなりました。 ご指摘頂いた点は、自己流ですが個別に直してみます。 玄人の方には、美しくない構文・手法のようですが、素人としては結果が得られれば充分でございます。 美しい構文の方がうれしいですが、そこまでは望んでおりませんので。。。 有難うございました。