javascript - ggggleclass ('d-block' ) 多输入 radio 不工作

Question

我们有许多 radio 输入。

 
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()">

And when I click on #marketer should show #referral_code.

当我点击 advertising 、 google 和 friends 时，referral_code 必须隐藏。仅显示营销人员

Answer 1

与 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)">