0

我们有很多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做秀

4

2 回答 2

0

类似于 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)">

于 2019-07-18T04:13:20.003 回答
0

您需要从每个单选按钮调用该函数。

function showReferal(show) {
  var refCode = document.querySelector('#referral_code');
  if (show) {
    refCode.classList.remove('d-none');
  } else if (refCode.classList.value.indexOf('d-none') === -1) {
    refCode.classList.add('d-none');
  }
}
.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)">

于 2019-07-17T21:26:46.827 回答