jQueryでラジオボタンを入れ子にしたいです

お世話になります。
初心者で、初歩的な質問で申し訳ございません。
jQueryでラジオボタンを入れ子にしたいです。
下記に「ラジオボタン2」をクリックしたら、「ラジオボタン3」が表示されるように追加したいです。

さらに「ラジオボタン3」のなかには「ラジオボタン4」と「ラジオボタン5」が追加されるようにしたいです。

HTML
1<input type="radio" name="Test" value="ラジオボタン１"/>ラジオボタン１
2<div id="rdobtn1">ラジオボタン１を押した時に表示される内容です。</div>
3<input type="radio" name="Test" value="ラジオボタン２"/>ラジオボタン２
4<div id="rdobtn2">ラジオボタン２を押した時に表示される内容です。</div>

javascript
1<script>
2
3	(function($) {
4    $('input[type=radio]').change(function() {
5        $("#rdobtn1").after().hide();
6        $("#rdobtn2").after().hide();
7  
8        if ($("input:radio[name='Test']:checked").val() == "ラジオボタン１") {
9            $('#rdobtn1').slideToggle('slow');
10            $("#rdobtn2").after().hide();
11        } else if($("input:radio[name='Test']:checked").val() == "ラジオボタン２") {
12            $('#rdobtn1').after().hide();
13            $('#rdobtn2').slideToggle('slow');
14        }
15    }).trigger('change'); 
16});
17
18</script>

よろしくお願いいたします。

miyabi_pudding

2020/06/16 01:00

> ラジオボタンを入れ子これが意味不明です。構造的に、ラジオボタンは基本的にはDOMツリーを整形しませんので、入れ子構造はできません。話を要約するとクリックした時に別の要素を出したい、ということでしょうか？

miyabi_pudding

2020/06/16 01:01

あと、ソースコードは、コードブロックを使いましょう。 ```言語名ここにソースコード ``` という形式です。

lbaker

2020/06/16 01:09

ありがとうございます！何から何まですみません。＞話を要約するとクリックした時に別の要素を出したい、ということでしょうか？その通りです。最初は「ラジオボタン1」と「ラジオボタン2」のみを表示しておいて「ラジオボタン2」をクリックしたら「ラジオボタン3」が表示されるというようにしたいです。よろしくお願いいたします。

miyabi_pudding

2020/06/16 01:11

わかりました。ソースコードをコードブロックでの記述にしてください。

yambejp

2020/06/16 01:14 編集

プログラムで追加するのですか？それとも最初から用意しておいて順番に表示するのでしょうか？

Lhankor_Mhy

2020/06/16 01:19

「ラジオボタン３を押した時に表示される内容です。」は必要ですか？

lbaker

2020/06/16 01:22

miyabi_takatsuk様ありがとうございます。ソースコードをコードブロックでの記述にしました。よろしくお願いいたします

lbaker

2020/06/16 01:24

yambejp様どちらでも大丈夫です。 htmlとCSSが少々わかる程度なので、その違いも判らずすみません。最終的にはラジオボタンで選択したデータも表示したいと思っています。よろしくお願いいたします。よろしくお願いいたします。

lbaker

2020/06/16 01:26 編集

Lhankor_Mhy様実際にはテキストでなく、「ラジオボタン4」と「ラジオボタン5」を表示したいです。よろしくお願いいたします。

Lhankor_Mhy

2020/06/16 01:27

ん？ということは、「ラジオボタン１を押した時に表示される内容です。」も必要ないということですか？

miyabi_pudding

2020/06/16 01:30

lbakerさん > jQueryソースコードはあと一歩でその実装できそうな気がしますが・・・。（つまり、そこまで書けるなら、自分でできるような気がする）あと、 > どちらでも大丈夫です。って言い方だと、作業依頼に見えてしまいます。（特に、HTMLで最初に記述しておくの方だと、HTMLの記述足りないので、作業依頼になってしまう）

lbaker

2020/06/16 01:36

Lhankor_Mhy様申し訳ございません。。。実際には、「ラジオボタン1」「ラジオボタン2」　　　↓　　　　　　　　↓ 「ラジオボタン3」「ラジオボタン4」「ラジオボタン5」　　　↓　　　　　　　　↓　　　　　　　　　↓ 　　"テキスト"　　 "画像+テキスト"　"画像+ラジオボタン+テキスト" というような、「ラジオボタンのみ」「テキストのみ」「画像とテキスト」「画像+ラジオボタン+テキスト」のパターンがあります。よろしくお願いいたします。

miyabi_pudding

2020/06/16 01:46

そのコメントの記載をそのまま質問本文に記載してください。

Lhankor_Mhy

2020/06/16 01:50

『「ラジオボタン3」のなかには「ラジオボタン4」と「ラジオボタン5」が追加されるようにしたい』と矛盾するように思えますが……？

lbaker

2020/06/16 02:13

miyabi_takatsuk様本文を修正しました。気持ちばかり焦ってしまい、いろいろと申し訳ございません。ご指摘ありがとうございました。

lbaker

2020/06/16 02:15

Lhankor_Mhy様例えで書いていたので、ズレがあり申し訳ございません。本文を修正しました。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

こんな感じで

javascript
1<style>
2.content,.hide{display:none}
3</style>
4<script>
5$(function(){
6  $('[name=hoge]')
7    .on('change',function(){
8      $(this).closest('label').nextAll('label:eq(0),div:eq(0)').show()
9    });
10});
11</script>
12<label><input type="radio" name="hoge" >r1</label>
13<div class="content">content1</div>
14<label class="hide"><input type="radio" name="hoge" >r2</label>
15<div class="content">content2</div>
16<label class="hide"><input type="radio" name="hoge" >r3</label>
17<div class="content">content3</div>
18<label class="hide"><input type="radio" name="hoge" >r4</label>
19<div class="content">content4</div>
20<label class="hide"><input type="radio" name="hoge" >r5</label>
21<div class="content">content5</div>