如何通过在 HTML 中选择单选按钮选项使文本字段/选择选项可见/不可见？答案

【问题标题】：How do I make a text field/select option visible/invisible by selecting a radio button option in HTML?如何通过在 HTML 中选择单选按钮选项使文本字段/选择选项可见/不可见？
【发布时间】：2014-05-17 00:25:07
【问题描述】：

<!DOCTYPE html>
<html>
   <body>
      <form>
         /*yes or no radio button option*/ 
         Deduction: <input type="radio" name="option" value="yes">Yes
         <input type="radio" name="option" value="no">No
         <br>

         /* text field for the amount if yes is selected, if no is selected the amount*/ 
         /* and the affiliate selection shouldn't be showing*/ 
         Amount:<input type="text" name="amount">
         <br>
            <select>
               <option value="affiliate">Select Affiliate</option>
               <option value="x">x</option>
               <option value="y">y</option>
            </select>
         <br>
         <br>
         <input type="submit" value="Submit">
         <br>
      </form>
   </body>
</html>

所以基本上如果没有选择只有提交按钮。如果选择“是”，则会显示金额文本字段，并且还会显示所选的附属公司。

【问题讨论】：

据我所知，使用纯 html 是不可能的

标签： html button html-select radio

【解决方案1】：

据我所知，仅使用 HTML 是无法做到这一点的。需要一个 JavaScript 解决方案。您可以轻松启用和禁用 div，完整示例如下：

<html>
<head>

<script type="text/javascript"> 
function Reveal (it, box) { 
var vis = (box.checked) ? "block" : "none"; 
document.getElementById(it).style.display = vis;
} 

function Hide (it, box) { 
var vis = (box.checked) ? "none" : "none"; 
document.getElementById(it).style.display = vis;
} 
</script>
</head>
<body>

<form>
<input type="radio" name="mype" value="ve1" onClick="Hide('div2', this); Reveal('didfv1', this)" />value1

<input type="radio" name="mype" value="value2" onClick="Hide('didfv1', this); Reveal('div2', this)" />value2

<input type="checkbox" name="modtype" value="value3" onClick="Reveal('div3', this)" />value3

<input type="checkbox" name="modtype" value="value4" onClick="Reveal('div4', this)" />value4

<input type="checkbox" name="modtype" value="value5" onClick="Reveal('div5', this)" />value5

</form>


<div class="row" id="didfv1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>

</body>

</html>

这是经过测试和工作的，更多信息在这里：http://www.webdeveloper.com/forum/showthread.php?205055-Div-Hide-Show-using-Radio-Buttons

【讨论】：