如果语句应该通过则语句运行else

Question

我正在努力找出为什么我的if-statement失败并运行else语句。

如果答案为“是”，则第一个问题下应出现一个输入框。事实并非如此。如果您选择否则显示。您可以在代码段控制台中看到控制台中的值正在正确读取。

我做错了什么？

var radioCheck = '';
	const radios = Array.from(document.querySelectorAll('[name="yesno"]'))

	for (const radio of radios) {
		radio.addEventListener('change', function() {
		radioCheck = document.querySelector('[name="yesno"]:checked').value;
		console.log(radioCheck);
	  })
	}
	var rsvpAns = $('.radio');
	rsvpAns.click(function() {
		if (radioCheck == 'Yes') {
			$('#ansYes').fadeToggle(400);
		} else {
			$('#ansYes').fadeOut(400);
		}
	});

.radio {
	display: none;
}
.radioAnswer {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
	transition-duration: .4s;
	position: relative;
}
.radioAnswer::before {
	display: inline-block;
	content: "";
	border-width: 0 2px 2px 0;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
	transition: width .4s linear .1s, 
    height .2s linear 1.6s;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: rotate(35deg) translateY(-50%);
	transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
	background: #0a0;
	color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
	border-color: #fff;
	transform: rotate(35deg) translateY(-50%);
	height: 1.5em;
	width: .8em;
	transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s;
	position: absolute;
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formField">
		<label class="label">Will you be attending?</label>
		<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
		<label class="radioAnswer" for="yes">Yes</label>
		<input type="radio" value="No" class="radio" name="yesno" id="no">
		<label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes">
		<label class="label">How many guests will you be bringing?</label>
		<input type="number" class="input">
</div>

Answer 1

为什么不在变更事件处理程序中显示/隐藏#ansYes？ 请注意，我使用fadeToggle()更改了fadeIn()。

＆＃13;

＆＃13;

const radios = Array.from(document.querySelectorAll('[name="yesno"]'))

for (const radio of radios) {
  radio.addEventListener('change', function() {
    radioCheck = document.querySelector('[name="yesno"]:checked').value;
    if (radioCheck == 'Yes') {
      $('#ansYes').fadeIn(400);
    } else {
      $('#ansYes').fadeOut(400);
    }
  })
}

＆＃13;

.radio {
	display: none;
}
.radioAnswer {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
	transition-duration: .4s;
	position: relative;
}
.radioAnswer::before {
	display: inline-block;
	content: "";
	border-width: 0 2px 2px 0;
	border-color: transparent;
	border-style: solid;
	width: 0;
	height: 0;
	transition: width .4s linear .1s, 
    height .2s linear 1.6s;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: rotate(35deg) translateY(-50%);
	transform-origin: center right;
}
input[type=radio]:checked+.radioAnswer {
	background: #0a0;
	color: #fff;
}
input[type=radio]:checked+.radioAnswer::before {
	border-color: #fff;
	transform: rotate(35deg) translateY(-50%);
	height: 1.5em;
	width: .8em;
	transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s;
	position: absolute;
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes {
	display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="formField">
		<label class="label">Will you be attending?</label>
		<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
		<label class="radioAnswer" for="yes">Yes</label>
		<input type="radio" value="No" class="radio" name="yesno" id="no">
		<label class="radioAnswer" for="no">NO</label>
</div>
<div class="formField" id="ansYes">
		<label class="label">How many guests will you be bringing?</label>
		<input type="number" class="input">
</div>

＆＃13;

＆＃13;

＆＃13;