【问题标题】：How To Show And Hide Input Fields Based On Radio Button Selection如何根据单选按钮选择显示和隐藏输入字段
【发布时间】：2013-07-11 09:15:34
【问题描述】：

这里是根据无线电选择显示输入字段的代码，例如：

脚本

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

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

您可以使用 Mootools 或 jQuery 函数向上/向下滑动，但如果您不需要动画效果，它可能对您的需要来说太多了。

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

【讨论】：

【解决方案2】：

***This will work.........
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 window.onload = function() {
    document.getElementById('ifYes').style.display = 'none';
    document.getElementById('ifNo').style.display = 'none';
}
function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifNo').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
    } 
    else if(document.getElementById('noCheck').checked) {
        document.getElementById('ifNo').style.display = 'block';
        document.getElementById('ifYes').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
   }
}
function yesnoCheck1() {
   if(document.getElementById('redhat').checked) {
       document.getElementById('redhat1').style.display = 'block';
       document.getElementById('aix1').style.display = 'none';
    }
   if(document.getElementById('aix').checked) {
       document.getElementById('aix1').style.display = 'block';
       document.getElementById('redhat1').style.display = 'none';
    }
}
</script>
</head>
<body>
Select os :<br>
windows
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>Unix
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="display:none">
Windows 2008<input type="radio" name="win" value="2008"/>
Windows 2012<input type="radio" name="win" value="2012"/>
</div>
<div id="ifNo" style="display:none">
Red Hat<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"value="2008" 

id="redhat"/>
AIX<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"  
value="2012" id="aix"/>
</div>
<div id="redhat1" style="display:none">
Red Hat 6.0<input type="radio" name="redhat" value="2008" id="redhat6.0"/>
Red Hat 6.1<input type="radio" name="redhat" value="2012" id="redhat6.1"/>
</div>
<div id="aix1" style="display:none">
aix 6.0<input type="radio" name="aix" value="2008" id="aix6.0"/>
aix 6.1<input type="radio" name="aix" value="2012" id="aix6.1"/
</div>
</body> 
</html>***

【讨论】：

我只是想告诉您，您的解决方案已经多次帮助了我！非常感谢！！！

【解决方案3】：

你可以用非常简单的步骤来做

$(':radio[id=radio1]').change(function() {
   $("#yes").removeClass("none");
   $("#no").addClass("none");


});
$(':radio[id=radio2]').change(function() {
   $("#no").removeClass("none");
   $("#yes").addClass("none");

});

【讨论】：

【解决方案4】：

您还需要将元素的高度设置为隐藏时的 0。我在使用jQuery时遇到了这个问题，我的解决方案是在隐藏时将高度和不透明度设置为0，然后在取消隐藏时将高度更改为自动并将不透明度设置为1。

我建议看一下 jQuery。它很容易上手，并且可以让您更轻松地执行此类操作。

$('#yesCheck').click(function() {
    $('#ifYes').slideDown();
});
$('#noCheck').click(function() {
    $('#ifYes').slideUp();
});

使用 jQuery 更改 CSS 并使用 CSS3 动画来做下拉菜单会稍微提高性能，但这也更复杂。上面的例子应该可以，但我还没有测试过。

【讨论】：

仅供参考，他使用的是 Mootools 而不是 jQuery :)
这个问题是用jQuery标记的，我在jQuery问题列表中找到了它，所以我给了他一个jQuery答案。

【解决方案5】：

使用display:none/block，而不是visibility，并为您希望仅在显示输入时看到的空间添加margin-top/bottom

 function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
           document.getElementById('ifYes').style.display = 'block';
        } else {
           document.getElementById('ifYes').style.display = 'none';
        }
    }

以及您的ifYes 标签的 HTML 行

<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:

【讨论】：

【解决方案6】：

使用display:none 不显示项目，然后使用JQuery 您可以使用fadeIn() 和fadeOut() 隐藏/取消隐藏元素。

http://www.w3schools.com/jquery/jquery_fade.asp

【讨论】：

【解决方案7】：

使用visibility属性只会影响页面元素的可见性；它们仍然会出现在页面布局中。要从页面中完全删除元素，请使用 display 属性。

display:none // for hiding
display:block // for showing

确保更改您的 css 文件以使用显示而不是可见性。

至于 javascript（这不是 jQuery），请确保在页面加载时默认隐藏选项：

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('ifYes').style.display = 'none';
    }

    function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
            document.getElementById('ifYes').style.display = 'block';
        } 
        else {
            document.getElementById('ifYes').style.display = 'none';
        }
    }

</script>

如果您还没有这样做，我建议您看看 jQuery。 jQuery 代码更清晰，更易于编写和理解。

http://www.w3schools.com/jquery/default.asp

【讨论】：

【解决方案8】：

<script type="text/javascript">
function Check() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    } 
    else {
        document.getElementById('ifYes').style.display = 'none';

   }
}

</script>
</head>
<body>
Select os :
<br>
Two
<input type="radio" onclick="Check();" value="Two" name="categor`enter code here`y" id="yesCheck"/>One
<input type="radio" onclick="Check();" value="One"name="category"/>
<br>
<div id="ifYes" style="display:none" >
Three<input type="radio" name="win" value="Three"/>
Four<input type="radio" name="win" value="Four"/>

【讨论】：

【解决方案9】：

以防万一有人想要一个解决方案，当使用纯 Javascript 选择单选按钮时，只显示 input 字段，这里是：

function yesnoCheck() {
    yes1 = document.getElementById('yes')
    yes2 = document.getElementById('acc')
    
    no1 = document.getElementById('other3')
    no2 = document.getElementById('other4')
    
    if (document.getElementById('yesCheck').checked) {
        yes1.type = yes2.type = 'text';
        no1.type = no2.type = 'hidden';
    } else {
        no1.type = no2.type = 'text';
        yes1.type = yes2.type = 'hidden';
    }
}

Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"/>

No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"/>

<br>

<input type='hidden' id='yes' name='yes' placeholder='If yes, explain:'/>
<input type='hidden' id='acc' name='acc' placeholder='What can we do to accommodate you?'/>

<input type='hidden' id='other3' name='other3' placeholder='other 3'>
<input type='hidden' id='other4' name='other4' placeholder='other 4'>

【讨论】：

我也知道我没有回答发布的问题，但根据标题，这是我前几天在寻找解决方案时想要的......