如何显示和隐藏基于单选按钮选择的输入字段 [英] How To Show And Hide Input Fields Based On Radio Button Selection

问题描述

以下是根据广播选择显示输入字段的代码，例如：

SCRIPT

 < script type =text / javascript> 
 
函数yesnoCheck（）{
 if（document.getElementById（'yesCheck'）。checked）{
 document.getElementById（'ifYes'）。style.visibility ='visible ; 
} else {
 document.getElementById（'ifYes'）。style.visibility ='hidden'; 
} 
 
< / script> 
  

HTML

 是
< input type =radioonclick =javascript：yesnoCheck（）; name =yesnoid =yesCheck/>否
< input type =radioonclick =javascript：yesnoCheck（）; name =yesnoid =noCheck/> 
< br> 
< div id =ifYesstyle =visibility：hidden>如果是，请解释：
< input type ='text'id ='yes'name ='yes'/> gt ; 
< br>我们可以做些什么来适应您？ 
< 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> 
  

然而，我想要隐藏输入字段（如图片），并使它们不会使用任何空间，直到选择单选按钮，当选择收音机显示淡入淡出效果...

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

CSS显示更快捷更简单的方法。

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

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:

解决方案

Replace all instances of visibility style to display

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

Here's updated 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.

CSS display is a faster and simpler approach.

这篇关于如何显示和隐藏基于单选按钮选择的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！