ラジオボタンの選択で要素を表示させたい

Question

	<ul>
  <li><input type="radio" name="btn" id="a" checked="checked">このボタンをクリックするとAAAが表示されます。</li>
  <li><input type="radio" name="btn" id="b">このボタンをクリックするとBBBが表示されます。</li>
</ul>
<div class="text text01">AAA</div>
<div class="text text02">BBB</div>

.text {
  display: none;
}
.text01 {
  display: block;
}

$(function() {
  $('[name="btn"]:radio').change( function() {
    if($('[id=a]').prop('checked')){
      $('.text').fadeOut();
      $('.text01').fadeIn();
    } else if ($('[id=b]').prop('checked')) {
      $('.text').fadeOut();
      $('.text02').fadeIn();
    }
  });
});

上記のコードで２つの選択肢のうちどちらかをチェックすると下にそれぞれ「AAA」もしくは「BBB」要素が出るようにしたいのですが
現状AAAがずっと表示された状態になってしまいます。
何か記述が間違っているのでしょうか？
詳しい方何かお力いただけると幸いです。

Comments

[cerfweb]

提示されたコードを再現した限りでは想定通りに動作しているようですが、ほかに関係のありそうなcssやjsコードはありませんか。

[bakio]

真っ白な環境で他のcssやjsが影響しない状況でやりましたが結果は同じでした...

[cerfweb]

jQueryファイルはきちんと読み込まれていますか。

Answer 1

CSSのみでフェイドアウト、フェイドインアニメーション

<div>
  <input type="radio" name="btn" id="a" checked="checked"><label for="a">このボタンをクリックするとAAAが表示されます。</label><br>
  <input type="radio" name="btn" id="b"><label for="b">このボタンをクリックするとBBBが表示されます。</label>
  <div>
  <div class="text text01">AAA</div>
  <div class="text text02">BBB</div>
  </div>
</div>

.text {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
#a:checked ~ div .text01, 
#b:checked ~ div .text02 {
  opacity: 1;
  visibility: visible;
  transition: all .3s .3s;
}

CodePenサンプル

Comments

[bakio]

無事解決できました。cssのみでかなりシンプルな記述で解決していただいたhatena19さんをベストアンサーにさせていただきました。

Answer 2

姑息な方法でこんな感じ

Comments

[yambejp]

<style>
.text{display:none}
[name=btn]{position:absolute;top:-999;}
#a:checked ~ * .text01{display:block;}
#b:checked ~ * .text02{display:block;}

#a:checked ~ * .a.checked{fill:black}
#b:checked ~ * .b.checked{fill:black}
</style>
<input type="radio" name="btn" id="a" checked="checked">
<input type="radio" name="btn" id="b">
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<circle cx="7" cy="7" r="2.5" fill="none" stroke="none" class="a checked" />
<circle cx="7" cy="7" r="5" fill="none" stroke="black" stroke-width="0.8" />
</svg>
<label for="a">このボタンをクリックするとAAAが表示されます。</label></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
<circle cx="7" cy="7" r="2.5" fill="none" stroke="none" class="b checked" />
<circle cx="7" cy="7" r="5" fill="none" stroke="black" stroke-width="0.8" />
</svg>
<label for="b">このボタンをクリックするとBBBが表示されます。</label></li>
</ul>
<div>
<div class="text text01">AAA</div>
<div class="text text02">BBB</div>
</div>

[bakio]

早速ありがとうございます！
下記キャプチャのように
https://gyazo.com/84d6a8ad501cbb9fc2ecfd0f08d59ed8

・ラジオボタンが１つしか出現しない。
・一度押すと切り替えはできない
と言う感じで未だ完全解決はできずでした...

自分の方でももっと調べます。

[yambejp]

jsだとこう
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[name=btn]').forEach((x1,y1)=>{
x1.addEventListener('click',()=>{
document.querySelectorAll('.text').forEach((x2,y2)=>{
x2.style.display=y1==y2?"block":"none";
});
});
});
document.querySelector('#a').click();
});
</script>

<ul>
<li><label><input type="radio" name="btn" id="a">このボタンをクリックするとAAAが表示されます。</label></li>
<li><label><input type="radio" name="btn" id="b">このボタンをクリックするとBBBが表示されます。</label></li>
</ul>
<div class="text text01">AAA</div>
<div class="text text02">BBB</div>