單擊下一個單選按鈕後隱藏單選按鈕的隱藏輸入

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>