javascript - 如何根据单选按钮选择显示和隐藏输入字段

Question

下面是根据 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...

Here is the fiddle :

Answer 1

将 visibility 样式的所有实例替换为 display

display:none //to hide
display:block //to show

这是更新的 jsfiddle:http://jsfiddle.net/QAaHP/16/

您可以使用 Mootools 或 jQuery 函数来向上/向下滑动，但如果您不需要动画效果，它可能无法满足您的需求。

CSS 显示是一种更快、更简单的方法。