具有其他文本字段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文本字段中鍵入一個值。 因為即使您確實選擇了另一個單選按鈕並再次顯示，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>