如何根據單選按鈕選擇顯示和隱藏輸入字段
[英]How To Show And Hide Input Fields Based On Radio Button Selection
問題描述
這是根據無線電選擇顯示輸入字段的代碼，例如：
腳本
<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...
8 個解決方案
解決方案1
43 已采納 2013-07-12 18:29:20
替換所有visibility樣式實例以display
display:none //to hide
display:block //to show
這是更新的 jsfiddle： http : //jsfiddle.net/QAaHP/16/
您可以使用 Mootools 或 jQuery 函數來向上/向下滑動，但如果您不需要動畫效果，那么您需要的可能太多了。
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
當元素隱藏時，您還需要將其高度設置為 0。 我在使用 jQuery 時遇到了這個問題，我的解決方案是在隱藏時將高度和不透明度設置為 0，然后在未隱藏時將高度更改為自動並將不透明度更改為 1。
我建議查看 jQuery。 它很容易上手，並且可以讓您更輕松地做這樣的事情。
$('#yesCheck').click(function() {
$('#ifYes').slideDown();
});
$('#noCheck').click(function() {
$('#ifYes').slideUp();
});
使用 jQuery 更改 CSS 並使用 CSS3 動畫來執行下拉列表的性能稍微好一點，但這也更復雜。 上面的例子應該可以工作，但我還沒有測試過。
解決方案4
5 2014-03-09 14:30:39
你可以用非常簡單的步驟來做
$(':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
使用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';
}
}
和ifYes標簽的 HTML 行
<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:
解決方案6
1 2013-07-12 18:24:48
使用display:none不顯示項目，然后使用 JQuery 您可以使用fadeIn()和fadeOut()來隱藏/取消隱藏元素。
解決方案7
1 2013-07-12 18:44:25
使用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 代碼更清晰，更容易編寫和理解。
解決方案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"/>
如何在 angular 材料中基於 mat 單選按鈕選擇顯示輸入字段
[英]How to show input fields based on mat radio button selection in angular material
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.