jQuery 如何根据单选按钮选择显示和隐藏输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17621515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Show And Hide Input Fields Based On Radio Button Selection
提问by cMinor
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...
回答by Learner
Replace all instances of visibilitystyle 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 显示是一种更快、更简单的方法。
回答by radhika
***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>***
回答by Shube
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");
});
回答by Carl Vitullo
You'll need to also set the height of the element to 0 when it's hidden. 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.
当元素隐藏时，您还需要将其高度设置为 0。我在使用 jQuery 时遇到了这个问题，我的解决方案是在隐藏时将高度和不透明度设置为 0，然后在未隐藏时将高度更改为自动并将不透明度更改为 1。
I'd recommend looking at jQuery. It's pretty easy to pick up and will allow you to do things like this a lot more easily.
我建议查看 jQuery。它很容易上手，并且可以让您更轻松地做这样的事情。
$('#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. The example above should work, but I haven't tested it.
使用 jQuery 更改 CSS 并使用 CSS3 动画来执行下拉列表的性能稍微好一点，但这也更复杂。上面的例子应该可以工作，但我还没有测试过。
回答by Zale
Use display:none/block, instead of visibility, and add a margin-top/bottomfor the space you want to see ONLY when the inputs are shown
使用display:none/block, 而不是visibility, 并margin-top/bottom为您希望仅在显示输入时看到的空间添加 a
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 ifYestag
和你的ifYes标签的HTML 行
<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:
回答by Dolchio
Using the visibilityproperty only affects the visibility of the elements on the page; they will still be there in the page layout. To completely remove the elements from the page, use the displayproperty.
使用该visibility属性只会影响页面元素的可见性；它们仍然会出现在页面布局中。要从页面中完全删除元素，请使用该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 code is much clearer and easier to write and understand.
如果您还没有这样做，我建议您看看 jQuery。jQuery 代码更清晰，更容易编写和理解。
回答by pinmonkeyiii
Use display:noneto not show the items, then with JQuery you can use fadeIn()and fadeOut()to hide/unhide the elements.
使用display:none不显示的项目，然后使用jQuery你可以使用fadeIn()和fadeOut()隐藏/取消隐藏的元素。
回答by Misael Riojas
<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"/>
