ラジオボタンのチェックで要素の表示非表示を切り替える

ラジオボタンのチェックありなしでdiv要素の表示非表示を切り替える処理の作成がうまくできず、お力を貸していただけると幸いです。

参考サイトを元に、ラジオボタンのチェックで表示非表示を作成しましたが、
以下のコーディングの場合、チェックを入れてもHTML側の表示が非表示のままになってしまいます。

HTML
1※１で2つのラジオボタンを作り、ラジオ２がチェックされると※２のdiv要素を表示したい
2※１
3<div class="mn_box_03">
4    <div>
5        <input type="radio" id="01A" name="radio01">
6        <label for="01A" class="radio01">ラジオ</label>
7    </div>
8    <div>
9        <input type="radio" id="01B" name="radio01" class="chk">
10        <label for="01B" class="radio01">ラジオ２</label>
11    </div>
12</div>
13
14※２
15<div class="disp">
16    <div class="mn_box_03r">
17        @foreach ($list as $item)
18            <input type="checkbox" id="{{ $item->name}}" name="checkbox001" checked="checked">
19            <label for="{{ $item->name}}" class="checkbox001">{{ $item->name}}</label>
20        @endforeach
21    </div>
22</div>

CSS
1.disp{ 
2  display: none;
3}
4input.chk:checked ~ .disp{
5  display: block;
6}

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

回答1件

ベストアンサー

~は後方の兄弟要素にマッチします。

HTML
1※１
2        <input type="radio" id="01A" name="radio01">
3        <input type="radio" id="01B" name="radio01" class="chk">
4<div class="mn_box_03">
5    <div>
6        <label for="01A" class="radio01">ラジオ</label>
7    </div>
8    <div>
9        <label for="01B" class="radio01">ラジオ２</label>
10    </div>
11</div>
12
13※２
14<div class="disp">
15    <div class="mn_box_03r">
16        @foreach ($list as $item)
17            <input type="checkbox" id="{{ $item->name}}" name="checkbox001" checked="checked">
18            <label for="{{ $item->name}}" class="checkbox001">{{ $item->name}}</label>
19        @endforeach
20    </div>
21</div>