如何根据单选按钮选择显示和隐藏输入字段
[英]How To Show And Hide Input Fields Based On Radio Button Selection
问题描述
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... 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...
8 个解决方案
解决方案1
43 已采纳 2013-07-12 18:29:20
Replace all instances of visibility style to display替换所有visibility样式实例以display
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 显示是一种更快、更简单的方法。
解决方案2
9 2014-02-08 14:16:38
***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
5 2013-07-12 18:29:37
You'll need to also set the height of the element to 0 when it's hidden.当元素隐藏时，您还需要将其高度设置为 0。 I ran into this problem while using jQuery, my solution was to set the height and opacity to 0 when it's hidden, then change height to auto and opacity to 1 when it's un-hidden.我在使用 jQuery 时遇到了这个问题，我的解决方案是在隐藏时将高度和不透明度设置为 0，然后在未隐藏时将高度更改为自动并将不透明度更改为 1。
I'd recommend looking at jQuery.我建议查看 jQuery。 It's pretty easy to pick up and will allow you to do things like this a lot more easily.它很容易上手，并且可以让您更轻松地做这样的事情。
$('#yesCheck').click(function() {
$('#ifYes').slideDown();
});
$('#noCheck').click(function() {
$('#ifYes').slideUp();
});
It's slightly better for performance to change the CSS with jQuery and use CSS3 animations to do the dropdown, but that's also more complex.使用 jQuery 更改 CSS 并使用 CSS3 动画来执行下拉列表的性能稍微好一点，但这也更复杂。 The example above should work, but I haven't tested it.上面的例子应该可以工作，但我还没有测试过。
解决方案4
5 2014-03-09 14:30:39
You can do with Very Simple Step你可以用非常简单的步骤来做
$(':radio[id=radio1]').change(function() {
$("#yes").removeClass("none");
$("#no").addClass("none");
});
$(':radio[id=radio2]').change(function() {
$("#no").removeClass("none");
$("#yes").addClass("none");
});
解决方案5
2 2013-07-12 18:35:21
Use display:none/block , instead of visibility , and add a margin-top/bottom for the space you want to see ONLY when the inputs are shown使用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';
}
}
and your HTML line for the ifYes tag和ifYes标签的 HTML 行
<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:
解决方案6
1 2013-07-12 18:24:48
Use display:none to not show the items, then with JQuery you can use fadeIn() and fadeOut() to hide/unhide the elements.使用display:none不显示项目，然后使用 JQuery 您可以使用fadeIn()和fadeOut()来隐藏/取消隐藏元素。
http://www.w3schools.com/jquery/jquery_fade.asp http://www.w3schools.com/jquery/jquery_fade.asp
解决方案7
1 2013-07-12 18:44:25
Using the visibility property only affects the visibility of the elements on the page;使用visibility属性只会影响页面元素的可见性； they will still be there in the page layout.它们仍然会出现在页面布局中。 To completely remove the elements from the page, use the display property.要从页面中完全删除元素，请使用display属性。
display:none // for hiding
display:block // for showing
Make sure to change your css file to use display instead of visibility too.确保更改您的 css 文件以使用显示而不是可见性。
As for the javascript (this is not jQuery), make sure you hide the options by default when the page loads:至于 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>
If you haven't done so already, I would recommend taking a look at jQuery.如果您还没有这样做，我建议您看看 jQuery。 jQuery code is much clearer and easier to write and understand. jQuery 代码更清晰，更容易编写和理解。
http://www.w3schools.com/jquery/default.asp http://www.w3schools.com/jquery/default.asp
解决方案8
1 2018-12-18 00:43:17
<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"/>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.