額外的文本字段單選按鈕的JavaScript

Question

我有3個單選按鈕：

• 津貼
• 學費
• 學校

如果我點擊津貼單選按鈕，它會打開列表中的ul。現在

，單選按鈕津貼應該點擊單選按鈕學費

後關閉。當我點擊單選按鈕「不全額學費」，我應該在對貨幣的文本字段中鍵入但它關閉它。

我想在點擊「不是全部學費」後阻止它關閉，這樣我可以在Money文本框中輸入一個值。

如果我點擊學校的單選按鈕，它也會關閉。

我該如何得到這個工作？

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

 
function Not_Full(select) { 
 
    if (select.value == 'Not Full') { 
 
    document.getElementById('Not_Full').style.display = "block"; 
 
    } else { 
 
    document.getElementById('Not_Full').style.display = "none"; 
 
    } 
 
}

<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> 
 
    <input type="radio" name="test1" value="Full"> Full Tuition Fee<br> 
 
    <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br> 
 
    </ul> 
 
    <div id="Not_Full" style="display: none;"> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 

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

難道這就是你要找的人？我不明白我想在點擊「不是全部學費」後阻止它關閉，這樣我可以在Money文本框中輸入一個值。因爲即使你選擇了另一個單選按鈕並返回，錢幣的價值仍然會在那裏！ 糾正我，如果我的理解是錯誤的

function reset() { 
 
    document.getElementById('allowance').style.display = "none"; 
 
    document.getElementById('tuition_fee').style.display = "none"; 
 
    document.getElementById('school_supply').style.display = "none"; 
 
} 
 

 
function Allowance(select) { 
 
    reset(); 
 
    if (select.value == 'Allowance') { 
 
    document.getElementById('allowance').style.display = "block"; 
 
    } else { 
 
    document.getElementById('allowance').style.display = "none"; 
 
    } 
 
} 
 

 
function Tuition(select) { 
 
    reset(); 
 
    if (select.value == 'Tuition Fee') { 
 
    document.getElementById('tuition_fee').style.display = "block"; 
 
    } else { 
 
    document.getElementById('tuition_fee').style.display = "none"; 
 
    } 
 
} 
 

 
function Supply(select) { 
 
    reset(); 
 
    if (select.value == 'School Supply') { 
 
    document.getElementById('school_supply').style.display = "block"; 
 
    } else { 
 
    document.getElementById('school_supply').style.display = "none"; 
 
    } 
 
} 
 

 
function Not_Full(select) { 
 
    if (select.value == 'Not Full') { 
 
    document.getElementById('Not_Full').style.display = "block"; 
 
    } else { 
 
    document.getElementById('Not_Full').style.display = "none"; 
 
    } 
 
}

<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> 
 
    <input type="radio" name="test1" value="Full"> Full Tuition Fee<br> 
 
    <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br> 
 
    </ul> 
 
    <div id="Not_Full" style="display: none;"> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 

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

它不工作，因爲點擊該輸入時的每個函數被調用一次。當點擊另一個時，你需要隱藏顯示的那個。

這裏是一個變形例

function expand(element) { 
 
    // collapse all div.expandable 
 
    Array.from(document.getElementsByClassName('expandable')) 
 
    .forEach(function(div) { 
 
     div.style.display = "none"; 
 
    }); 
 

 
    // expand the one coresponding to the clicked input 
 
    document.getElementById(element.id.toLowerCase()).style.display = "block"; 
 
}

li { 
 
    list-style: none; 
 
}

<li> 
 
    <input type="radio" name="ship_need" value="Allowance" id="Allowance" onchange="expand(this)"> 
 
    <label for="Allowance">Allowance</label> 
 
    <div class="expandable" 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> 
 
</li> 
 

 
<li> 
 
    <input type="radio" name="ship_need" value="Tuition Fee" id="Tuition" onchange="expand(this)"> 
 
    <label for="Tuition">Tuition</label> 
 
    <div class="expandable" id="tuition" style="display: none;"> 
 
    <ul> 
 
     <li>Tuition Fee</li> 
 
     <input type="radio" name="test1" value="Full"> Full Tuition Fee<br> 
 
     <input type="radio" name="test1" value="Not Full" id="test" onchange="Not_Full(this)"> Not Full Tuition Fee<br> 
 
    </ul> 
 
    <div id="Not_Full" style="display: none;"> 
 
     <label class="control-label">Money:</label> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
</li> 
 

 
<li> 
 
    <input type="radio" name="ship_need" value="School Supply" id="School" onchange="expand(this)"> 
 
    <label for="School">School</label> 
 
    <div class="expandable" id="school" style="display: none;"> 
 
    <ul> 
 
     <li>Books</li> 
 
     <li>Uniform</li> 
 
    </ul> 
 
    <label class="control-label">Money:</label> 
 
    <input type="text"> 
 
    </div> 
 
</li>