Question

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

所以基本上如果没有选择，那么只有提交按钮。如果选择是，则显示金额文本字段，并且还显示所选的会员。

Answer 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

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

1 个答案: