下面是根据 radio 选择显示输入字段的代码,例如:
脚本
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.visibility = 'visible';
} else {
document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
HTML
Yes
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>No
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">If yes, explain:
<input type='text' id='yes' name='yes'/>
<br>What can we do to accommodate you?
<input type='text' id='acc' name='acc'/>
</div>
other 3
<input type='text' id='other3' name='other3'>
<br>
other 4
<input type='text' id='other4' name='other4'>
<br>
However I would like input fields to be hidden (like on the image), and make they do not use any space until radio button is selected, when radio is selected show them with fade effect...
最佳答案
将 visibility
样式的所有实例替换为 display
display:none //to hide
display:block //to show
这是更新的 jsfiddle:http://jsfiddle.net/QAaHP/16/
您可以使用 Mootools 或 jQuery 函数来向上/向下滑动,但如果您不需要动画效果,它可能无法满足您的需求。
CSS 显示是一种更快、更简单的方法。
关于javascript - 如何根据单选按钮选择显示和隐藏输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17621515/