如何使一个文本字段/选择选项可见/选择一个HTML单选按钮选项看不见？ [英] How do I make a text field/select option visible/invisible by selecting a radio button option in HTML?
本文介绍了如何使一个文本字段/选择选项可见/选择一个HTML单选按钮选项看不见？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!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>
如果没有被选中所以基本上只存在提交按钮。如果选择yes量文本字段显示与所选择的附属显示为好。
So basically if no is selected there is only the submit button. If yes is selected the amount text field is shown and the selected affiliate is shown as well.
推荐答案
据我所知，你不能只用HTML做到这一点。一个JavaScript解决方法引起。您可以启用和轻松禁用的div，下面完整的例子：
To my knowledge you can't do this with just HTML. A JavaScript solution entails. You can enable and disable divs with ease, full example below:
<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
This is tested and working, more here: http://www.webdeveloper.com/forum/showthread.php?205055-Div-Hide-Show-using-Radio-Buttons
这篇关于如何使一个文本字段/选择选项可见/选择一个HTML单选按钮选项看不见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
