Question

我的javascript代码混乱，因为我不熟悉js.I有三个带有隐藏输入的单选按钮。现在，如果我点击radioBtn1，隐藏的输入将会显示出来。我想要的是if当我点击radioBtn2或radioBtn3时，radioBtn1中隐藏的输入应该再次隐藏。所以当我第二次点击任何radioBtn时，我首先点击的radioBtn，其隐藏的输入应该再次隐藏

＆＃13;

function Allowance(select){
   if(select.value=='Allowance'){
    document.getElementById('allowance').style.display = "block";
   }else{
    document.getElementById('allowance').style.display = "none";
   }
} 
function Tuition(select){
  if(select.value=='Tuition Fee'){

    document.getElementById('tuition_fee').style.display = "block";
   } else{
    document.getElementById('tuition_fee').style.display = "none";
   }
} 
function Supply(select){
  if(select.value=='School Supply'){
    document.getElementById('school_supply').style.display = "block";
   } else{
    document.getElementById('school_supply').style.display = "none";
   }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="Allowance" id="test" onchange="Allowance(this)"> Allowance<br>
 <div id="allowance"  style="display: none;">
 <ul>
   <li>Food Allowance</li>
   <li>Transportation Allowance</li>
  </ul>
<label class="control-label">Money:</label>
   <input type="text">
</div>
  <input type="radio" name="ship_need" value="Tuition Fee" id="test" onchange="Tuition(this)"> Tution<br>
 <div id="tuition_fee"  style="display: none;">
 <ul>
   <li>Tuition Fee</li>
  </ul>
<label class="control-label">Money:</label>
   <input type="text">
</div>
  <input type="radio" name="ship_need" value="School Supply" id="test" onchange="Supply(this)"> School
 <div id="school_supply"  style="display: none;">
 <ul>
   <li>Books</li>
   <li>Uniform</li>
  </ul>
<label class="control-label">Money:</label>
   <input type="text">
</div>

＆＃13;

Answer 1

您可以使用jquery减少代码。请查看以下代码，它可能对您有帮助。

$( document ).ready(function() {
	$('.sub_list').css('display','none');
	$('input[type=radio]').change(function() {
		$('.sub_list').css('display','none');
		$('#'+this.value).css('display','block');
		console.log(this.value);
	})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="ship_need" value="allowance" id="test" > Allowance<br>
 <div id="allowance" class="sub_list"  >
 <ul>
   <li>Food Allowance</li>
   <li>Transportation Allowance</li>
  </ul>
<label class="control-label">Money:</label>
   <input type="text">
</div>
  <input type="radio" name="ship_need" value="tuition_fee" id="test2" > Tution<br>
 <div id="tuition_fee" class="sub_list"   >
 <ul>
   <li>Tuition Fee</li>
  </ul>
<label class="control-label">Money:</label>
   <input type="text">
</div>
  <input type="radio" name="ship_need" value="school_supply" id="test3" > School
 <div id="school_supply" class="sub_list"  >
 <ul>
   <li>Books</li>
   <li>Uniform</li>
  </ul>
<label class="control-label">Money:</label>
   <input type="text">
</div>

Answer 2

在显示输入之前关闭其他输入：

Answer 3

因为你的逻辑是偏逻的，所以你显示的是字段，但没有隐藏其他字段。

function Allowance(select){
   if(select.value=="Allowance"){
    document.getElementById('allowance').style.display = "block";
    document.getElementById('tuition_fee').style.display = "none";
    document.getElementById('school_supply').style.display = "none";
   }
} 
function Tuition(select){
  if(select.value=='Tuition Fee'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
    document.getElementById('school_supply').style.display = "none";
   } 
} 
function Supply(select){
  if(select.value=='School Supply'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
    document.getElementById('school_supply').style.display = "block";
   }
}

这里小提琴： https://jsfiddle.net/vjb2dnpg/

单击下一个单选按钮后，隐藏单选按钮中的隐藏输入

3 个答案: