javascript - toggleclass('d-block')多输入单选不起作用

我们有很多radio input。

function showReferal() {
   document.querySelector('#referral_code').classList.remove('d-none');
}
 

 <div class="form-group row d-none" id="referral_code">
	<label for="referral_code">Referral Code</label>
	<div class="col-md-10">
		<input id="referral_code" type="text" class="form-control" name="referral_code">
	</div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal()">

  当我单击#marketer时，应显示#referral_code。


当我单击advertising和google和friends时，必须隐藏referral_code。仅显示marketer

最佳答案

与Alex Kudryashev的答案类似，但是您可以使用内置的toggle方法来代替编写if语句。

function showReferal(show) {
  var refCode = document.querySelector('#referral_code');
  refCode.classList.toggle('d-none', !show);
}

.d-none {
  display: none
}

<div class="form-group row d-none" id="referral_code">
  <label for="referral_code">Referral Code</label>
  <div class="col-md-10">
    <input id="referral_code" type="text" class="form-control" name="referral_code">
  </div>
</div>
<input class="form-check-input" type="radio" name="familiar" id="google" value="1" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="friends" value="2" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="advertising" value="3" onclick="showReferal(false)">
<input class="form-check-input" type="radio" name="familiar" id="marketer" value="4" onclick="showReferal(true)">