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

Question

由于我对js.不熟悉，因此我的javascript代码中存在混淆。我有三个单选按钮，隐藏了inputs.Now，如果我单击radioBtn1，隐藏输入会显示出来。我想要的是，如果当我单击radioBtn2或radioBtn3时，radioBtn1中的隐藏输入应该被再次隐藏。所以当我第二次点击任何radioBtn时，我已经点击了radioBtn ，其隐藏的输入应该再次隐藏。

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"; 
 
    } 
 
}

<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>

Answer 1

表示所输入的关闭在别人面前：

function Allowance(select){ 
    if(select.value=='Allowance'){ 
    document.getElementById('tuition_fee').style.display = "none"; 
    document.getElementById('school_supply').style.display = "none"; 
    document.getElementById('allowance').style.display = "block"; 
    }else{ 
    document.getElementById('allowance').style.display = "none"; 
    } 
} 
function Tuition(select){ 
    if(select.value=='Tuition Fee'){ 
    document.getElementById('allowance').style.display = "none"; 
    document.getElementById('school_supply').style.display = "none"; 
    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('allowance').style.display = "none"; 
    document.getElementById('tuition_fee').style.display = "none"; 
    document.getElementById('school_supply').style.display = "block"; 
    } else{ 
    document.getElementById('school_supply').style.display = "none"; 
    } 
} 

Answer 2

因为你的逻辑是局部的，你是显示领域，而不是躲在等领域。

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/

Answer 3

您可以通过使用jQuery降低你的代码。请看下面的代码，它可以帮助你。

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

<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>