如何根据单选按钮选择显示和隐藏输入字段
cMi*_*nor 34 html javascript jquery
以下是根据无线电选择显示输入字段的代码,如:
脚本
<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>
但是我想隐藏输入字段(比如在图像上),并且在选择单选按钮之前不要使用任何空格,选择收音机时会显示淡入淡出效果...
Lea*_*ner 36
将所有visibility样式实例替换为display
display:none //to hide
display:block //to show
这是更新的jsfiddle:http://jsfiddle.net/QAaHP/16/
你可以使用Mootools或jQuery函数来上下滑动,但如果你不需要动画效果,它可能太多了你需要的东西.
CSS显示是一种更快速,更简单的方法.
小智 7
***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>***
当元素隐藏时，您还需要将其高度设置为 0。我在使用 jQuery 时遇到了这个问题，我的解决方案是在隐藏时将高度和不透明度设置为 0，然后在未隐藏时将高度更改为自动并将不透明度更改为 1。
我建议查看 jQuery。它很容易上手，并且可以让您更轻松地做这样的事情。
$('#yesCheck').click(function() {
$('#ifYes').slideDown();
});
$('#noCheck').click(function() {
$('#ifYes').slideUp();
});
使用 jQuery 更改 CSS 并使用 CSS3 动画来执行下拉列表的性能稍好一些，但这也更复杂。上面的例子应该可以工作，但我还没有测试过。
- 这个问题是用jQuery标记的，我在jQuery问题列表中找到了它，所以我给了他一个jQuery答案。 (4认同)
小智 5
你可以用非常简单的步骤
$(':radio[id=radio1]').change(function() {
$("#yes").removeClass("none");
$("#no").addClass("none");
});
$(':radio[id=radio2]').change(function() {
$("#no").removeClass("none");
$("#yes").addClass("none");
});