38

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

脚本

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

这是小提琴：

在此处输入图像描述

4

9 回答 9

43

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

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

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

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

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

于 2013-07-12T18:29:20.277 回答
11 
***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>***
于 2014-02-08T14:16:38.377 回答
6

您可以使用非常简单的步骤

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


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

});
于 2014-03-09T14:30:39.930 回答
5

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

我建议看一下 jQuery。它很容易上手，并且可以让你更轻松地做这样的事情。

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

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

于 2013-07-12T18:29:37.757 回答
2

使用display:none/block, 而不是, 并为您希望仅在显示输入时看到的空间visibility添加 amargin-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:
于 2013-07-12T18:35:21.207 回答
1

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

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

于 2013-07-12T18:24:48.123 回答
1

使用该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

于 2013-07-12T18:44:25.773 回答
1 
<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"/>
于 2018-12-18T00:43:17.327 回答
0

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

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

于 2021-10-11T07:56:46.043 回答