logo标签列表

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

javascriptjqueryhtml
42

这里是根据单选按钮选择来显示输入字段的代码，如下所示：

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>
然而，我希望输入字段被隐藏（就像图片上的那样），并且在单选按钮被选中之前不占用任何空间，选中单选按钮后以淡入效果显示它们...

这里是相关的 fiddle：

enter image description here

9个回答
48

将所有 visibility 样式替换为 display

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

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

您可以使用 Mootools 或 jQuery 函数来滑动上下，但如果您不需要动画效果，那可能会超出您的需求。

CSS 的 display 属性是一种更快、更简单的方法。

12
***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>***
我只是想告诉你，你的解决方案已经帮助了我多次！非常感谢！！！ - bizna
6
您可以通过非常简单的步骤实现。
$(':radio[id=radio1]').change(function() {
   $("#yes").removeClass("none");
   $("#no").addClass("none");


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

});
5

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

我建议您查看jQuery。它相当容易上手，可以让您更轻松地完成此类操作。

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

使用jQuery修改CSS并使用CSS3动画实现下拉菜单在性能方面略有改善，但也更为复杂。上面的示例应该可以工作，但我尚未测试过。

只是提供信息，他正在使用Mootools而不是jQuery :) - Learner
4
这个问题被标记为jQuery，并且我在jQuery问题列表中找到了它，所以我给出了一个jQuery答案。 - Carl Vitullo
3

使用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';
        }
    }

以及您的HTML代码行，用于ifYes标签

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

1
1

如果有人想要使用纯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'>

我也知道我没有回答所发布的问题，但基于标题，这正是我在寻找解决方案时想要的... - t2fmkh
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"/>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接