javascript - 如何根据单选按钮选择显示和隐藏输入字段(How To Show And Hide Input Fields Based On Radio Button Selection)

Question

Here is the code to show input fields depending on radio selection like:(以下是根据无线电选择显示输入字段的代码，如：)

SCRIPT(脚本)

<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(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 :(这是小提琴 ：)

  ask by cMinor translate from so

Answer 1

Replace all instances of visibility style to display(替换要display所有visibility样式实例)

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

Here's updated jsfiddle: http://jsfiddle.net/QAaHP/16/(这是更新的jsfiddle： http ： //jsfiddle.net/QAaHP/16/)

You can do it using Mootools or jQuery functions to slide up/down but if you don't need animation effect it's probably too much for what you need.(你可以使用Mootools或jQuery函数来上下滑动，但如果你不需要动画效果，它可能太多了你需要的东西。)

CSS display is a faster and simpler approach.(CSS显示是一种更快速，更简单的方法。)