2
ラジオボタンの選択に基づいて結果を出力するフォームがあります。フォームには複数のラジオボタンがあり、選択に基づいて該当するdivが表示され、無関係なものが非表示になります。ラジオボタン選択の出力にダブルクリックが必要
機能面では、正常に動作します。問題は、結果を出力するには（ラジオボタンを選択した後に）を送信ボタンの2Xを押す必要があります。ここで
は私のコードです：
(function($) {
$('#quiz_submit').click(function() {
$('#quiz_submit').click(function() {
let checkedId = $('input[type=radio][name=quiz-selector]:checked').attr('id')
if (checkedId == "option-one") {
$('.a1').show();
$('.a2, .a3').hide();
} else if (checkedId == "option-two") {
$('.a2').show();
$('.a1, .a3').hide();
} else if (checkedId == "option-three") {
$('.a3').show();
$('.a1, .a2').hide();
}
});
});
})(jQuery);.re-quiz__internal {
max-width: 1000px;
margin: 0 auto;
}
.quiz__section {
float: left;
width: calc(50% - 10px);
margin-top: -60px;
margin-right: 20px;
background-color: #c1c1c1;
padding: 40px 40px;
box-shadow: 10px 20px 36px 0 rgba(0, 0, 0, 0.2), 0 10px 40px 0 rgba(0, 0, 0, 0.19) !important;
}
.slider__section {
float: left;
width: calc(50% - 10px);
}
.type__quiz {
width: 50px;
margin: 0 auto;
padding: 0px 0px 10px 0px;
border-bottom: 1px solid white;
text-align: center;
color: #FFF;
}
.quiz__title {
color: #FFF;
font-size: 2em;
text-align: center;
width: 400px;
margin: 20px auto 40px auto;
}
.quiz__form {
color: #FFF;
margin-bottom: 20px;
float: left;
width: 100%;
}
.quiz__item {
color: #FFF;
display: block;
position: relative;
float: left;
width: 100%;
margin-bottom: 10px;
font-size: 14px;
line-height: 25px;
}
.quiz__item input[type=radio] {
position: absolute;
visibility: hidden;
}
.quiz__item label {
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 0px 25px 50px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.quiz__item:hover label {
color: #FFFFFF;
}
.quiz__item .check {
display: block;
position: absolute;
border: 5px solid #FFF;
border-radius: 100%;
height: 32px;
width: 32px;
top: 30px;
left: 0px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.quiz__item:hover .check {
border: 4px solid #FFFFFF;
}
.quiz__item .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked~.check {
border: 4px solid #fff000;
}
input[type=radio]:checked~.check::before {
background: #fff000;
}
input[type=radio]:checked~label {
color: #EE78A5;
}
#quiz_submit {
display: block;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
background: #fff000;
color: #FFF;
width: 160px;
line-height: 40px;
margin: 20px auto;
}
.a1,
.a2,
.a3 {
display: none;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="re-quiz__internal">
<div class="quiz__section">
<p class="quiz__title">Questions for the quiz</p>
<ul class="quiz__form">
<li class="quiz__item">
<input type="radio" id="option-one" name="quiz-selector">
<label for="option-one">Qeustion number 1</label>
<div class="check"></div>
</li>
<li class="quiz__item">
<input type="radio" id="option-two" name="quiz-selector">
<label for="option-two">Qeustion number 2</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li class="quiz__item">
<input type="radio" id="option-three" name="quiz-selector">
<label for="option-three">Qeustion number 3</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
<input type="button" id="quiz_submit" class="submit-cta" value="SUBMIT">
<!-- Answers -->
<div class="a1">Answerof the questoon - One </div>
<div class="a2">Answerof the questoon - Two </div>
<div class="a3">Answerof the questoon - Three </div>
</div>
</div>