選択肢を何度も選び直せるアンケート（jQuery、javascript）

Question

前提

jQueryで選択肢を選ぶと答えが変わるアンケートを作りたい。
アンケート自体は作れたのですが、
選択肢を選び直した時に思うように表示が切り替わりません。

実現したいこと

Q1に対してAとBの選択肢
Aを押すと回答1が表示される
Bを押すと回答2が表示される
↓
Aを選んだ状態でBを押す→回答1は非表示にして回答2を表示する
Bを選んだ状態でAを押す→回答2は非表示にして回答1を表示する
↓
以下ループ

発生している問題・エラーメッセージ

Aを押してある状態でBを押すとどちらも表示されなくなってしまう
（diplay:noneのままになる）

該当のソースコード

<div class="Balloon_wrap" id="sec01">
  
 <dl class="Balloon reverse is-fadein">
  <dt></dt>
  <dd class="que">
    <label><input type="radio" name="q1" id="a"><span class="enq_btn">A</span></span></label>
    <label><input type="radio" name="q1" id="b"><span class="enq_btn">B</span></span></label>
  </dd>
</dl>
 
</div>

<!-- sec02 -->
<div class="Balloon_wrap" id="sec02">
	
<dl class="Balloon">
  <dt><img src="#" alt=""></dt>
  <dd style="width: 40%;height: 50px;">
    <span class="loader"></span>
  </dd>
</dl>
	
<dl class="Balloon ans01">
<dt><img src="#" alt=""></dt>
<dd>回答１</dd>
</dl>
  
<dl class="Balloon ans02">
<dt><img src="#" alt=""></dt>
<dd>回答２</dd>
</dl>

<dl class="Balloon">
<dt><img src="#" alt=""></dt>
<dd>・・・</dd>
</dl>
<dl class="Balloon">
<dt><img src="#" alt=""></dt>
<dd>・・・</dd>
</dl>

</div>

$('#sec01 .que input').on('click',function(){
  $('#sec02').show();
  var loading = $('#sec02 .Balloon:nth-child(1)');
  $(loading).addClass('is-fadein');
  
  var ans = $(this).attr('id');
  if (ans == 'a'){
    var balloon = $('#sec02 .Balloon.ans01');
    $('#sec02 .Balloon.ans02').remove();
  }else{
	balloon = $('#sec02 .Balloon.ans02');
    $('#sec02 .Balloon.ans01').remove();
  }

    var position = $('#sec02').offset().top;
    $('body,html').animate({scrollTop:position}, 500, 'swing');
 
  setTimeout(function(){
    $(loading).hide();
    $(balloon).addClass('is-fadein');
    
    var sec = $('#sec02 .Balloon');
    $(sec).each(function (i) {
		var delay = 500;
		$(this).delay(i * delay).queue(function(next){
			$(this).addClass("is-fadein");
			next();
		});
    });
	},1200);
  });

###やってみたこと
・10、13行目のremove→toggle
・removeの戻り値を使ったif文の追加

Answer 1

fontawesomeでニセラジオボタンをつくってcssだけでやる

<style>
.q,
#a1a:checked ~ * [for=a1a] .far.fa-circle,
#a1b:checked ~ * [for=a1b] .far.fa-circle,
#a2a:checked ~ * [for=a2a] .far.fa-circle,
#a2b:checked ~ * [for=a2b] .far.fa-circle,
#a2c:checked ~ * [for=a2c] .far.fa-circle,
#a1a:not(:checked) ~ * [for=a1a] .fas.fa-check-circle,
#a1b:not(:checked) ~ * [for=a1b] .fas.fa-check-circle,
#a2a:not(:checked) ~ * [for=a2a] .fas.fa-check-circle,
#a2b:not(:checked) ~ * [for=a2b] .fas.fa-check-circle,
#a2c:not(:checked) ~ * [for=a2c] .fas.fa-check-circle,
#a1a:not(:checked) ~ * .a1a,
#a1b:not(:checked) ~ * .a1b,
#a2a:not(:checked) ~ * .a2a,
#a2b:not(:checked) ~ * .a2b,
#a2c:not(:checked) ~ * .a2c{
display:none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<form>
<input type="radio" name="q1" id="a1a" value="a" class="q">
<input type="radio" name="q1" id="a1b" value="b" class="q">
<input type="radio" name="q2" id="a2a" value="a" class="q">
<input type="radio" name="q2" id="a2b" value="b" class="q">
<input type="radio" name="q2" id="a2c" value="c" class="q">
<div class="Balloon_wrap">
<dl class="Balloon reverse is-fadein">
  <dt></dt>
  <dd class="que">
  <label for="a1a"><i class="far fa-circle"></i><i class="fas fa-check-circle"></i><span class="enq_btn">A</span></span></label>
  <label for="a1b"><i class="far fa-circle"></i><i class="fas fa-check-circle"></i><span class="enq_btn">B</span></span></label>
  </dd>
</dl>
</div>
<!-- sec02 -->
<div class="Balloon_wrap">
<dl class="Balloon a1a">
<dt><img src="#" alt=""></dt>
<dd>質問１ 回答A</dd>
</dl>
<dl class="Balloon a1b">
<dt><img src="#" alt=""></dt>
<dd>質問１ 回答B</dd>
</dl>
</div>
<div class="Balloon_wrap">
<dl class="Balloon reverse is-fadein">
  <dt></dt>
  <dd class="que">
  <label for="a2a"><i class="far fa-circle"></i><i class="fas fa-check-circle"></i><span class="enq_btn">A</span></span></label>
  <label for="a2b"><i class="far fa-circle"></i><i class="fas fa-check-circle"></i><span class="enq_btn">B</span></span></label>
  <label for="a2c"><i class="far fa-circle"></i><i class="fas fa-check-circle"></i><span class="enq_btn">C</span></span></label>
  </dd>
</dl>
</div>
<!-- sec02 -->
<div class="Balloon_wrap">
<dl class="Balloon a2a">
<dt><img src="#" alt=""></dt>
<dd>質問2 回答A</dd>
</dl>
<dl class="Balloon a2b">
<dt><img src="#" alt=""></dt>
<dd>質問2 回答B</dd>
</dl>
<dl class="Balloon a2c">
<dt><img src="#" alt=""></dt>
<dd>質問2 回答C</dd>
</dl>
</div>

Answer 2

先を越されてしまいましたが、
もとのHTMLを書き換えずにとりあえず動かす方法として書き残しておきます。
本格的に作っていくならCocodeさんのコードのほうが無駄がなく、見やすくて良いと思います。

質問だとA、B2つの答えだけとのことですが、
コードからは3つ以上の答えも想定しているようでしたので、
.Ballonをすべて非表示にする→指定の答えだけ表示するで書き直しています。

//オリジナル
if (ans == 'a'){
	var balloon = $('#sec02 .Balloon.ans01');
	$('#sec02 .Balloon.ans02').remove();
}else{
	balloon = $('#sec02 .Balloon.ans02');
	$('#sec02 .Balloon.ans01').remove();
}

//変更後
if (ans == 'a'){
	var balloon = $('#sec02 .Balloon.ans01');
	$('#sec02 .Balloon').hide();
	$(balloon).show();
}else{
	balloon = $('#sec02 .Balloon.ans02');
	$('#sec02 .Balloon').hide();
	$(balloon).show();
}

Answer 3

ご質問と関係のないコードが書かれていて見えにくかったので、関係のない部分を省いて回答させていただきます。

変更点

• HTMLについて
  • ラジオボタンにvalue属性をつけました。
  • 回答のdl要素に、共通のclass.answerをつけました。
  • 回答のdl要素に、カスタムデータ属性data-valueをつけました。
  • 回答のdl要素に、display:noneをつけ、最初は全部非表示にしました。
• JavaScriptについて
  • clickイベントではなく、changeイベントにしました（clickでも構いませんが）。
  • 選択されたラジオボタンのvalueと同じ値のdata-valueをもつ要素を表示、違うものを非表示にするようにしました。

コード例

• 動作確認用サンプル：https://jsfiddle.net/180Lmjaw/

<label><input type="radio" name="q1" value="A">A</label> <!-- valueをかく -->
<label><input type="radio" name="q1" value="B">B</label> <!-- valueをかく -->

<!-- ラジオボタンのvalueと同じカスタムデータ属性をつける -->
<!-- display:noneで最初は非表示にしておく -->
<dl class="answer" data-value="A" style="display: none">
  <dt><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1%20(A)"></dt>
  <dd>回答１（A）</dd>
</dl>

<!-- ラジオボタンのvalueと同じカスタムデータ属性をつける -->
<!-- display:noneで最初は非表示にしておく -->
<dl class="answer" data-value="B" style="display: none">
  <dt><img src="https://placehold.jp/3e704d/ffffff/150x150.png?text=2%20(B)"></dt>
  <dd>回答２（B）</dd>
</dl>

// 例えばラジオボタンで「A」を選択した場合、、、
$(function() {
    $('[name=q1]').on('change', function() { // ラジオボタンセットの値が変更されたら実行
  	const radioValue = $(this).val(); // 選択されているラジオボタンの値（value）を取得（例：A）
    $(`.answer:not([data-value=${radioValue}])`).hide(); // data-value="A"ではない、.answer要素を非表示
    $(`.answer[data-value=${radioValue}]`).show(); // data-value="A"の、.answer要素を表示
  });
});

Comments

[mikuriya1123]

皆様ご回答ありがとうございます。
こんなにもシンプルに書けるものなのですね…大変勉強になりました。