這裏是爲了顯示輸入字段根據無線電選擇喜歡的代碼：如何顯示和隱藏輸入字段基於無線電按鈕選擇

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>

然而我想要隱藏輸入字段（如圖像），並使他們不使用任何空間，直到選擇單選按鈕，當選擇收音機顯示淡入淡出效果...

Here is the fiddle：

enter image description here

來源

2013-07-12 cMinor

更換的visibility風格的所有實例display

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

這裏的更新的jsfiddle：http://jsfiddle.net/QAaHP/16/

可以使用Mootools的或jQuery的功能，以向上/向下滑動，但是如果你這樣做不需要動畫效果，它可能太多，你需要什麼。

CSS顯示是一種更快，更簡單的方法。

來源

2013-07-12 18:29:20 Learner

使用display:none不顯示的項目，然後使用jQuery你可以使用fadeIn()和隱藏/取消隱藏的元素。

http://www.w3schools.com/jquery/jquery_fade.asp

來源

2013-07-12 18:24:48 pinmonkeyiii

當隱藏元素時，您還需要將元素的高度設置爲0。我在使用jQuery時遇到了這個問題，我的解決方案是在隱藏時將高度和不透明度設置爲0，然後在未隱藏時將高度更改爲自動並將不透明度更改爲1。

我建議看看jQuery。拿起來很容易，而且可以讓你更輕鬆地完成這樣的事情。

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

這對性能略好與jQuery更改CSS和使用CSS3動畫做的下拉菜單中，但也更復雜。上面的例子應該可以工作，但我沒有測試過。

來源

2013-07-12 18:29:37

僅供參考他使用Mootools的，而不是jQuery的:) – Learner

問題是標籤使用jQuery做，我發現它在jQuery的問題列表，所以我給了他一個jQuery答案。 –

夠公平的.... – Learner

使用display：，能見度，而不是無/塊，並添加邊距/底部要看到的只是空間當輸入顯示

function yesnoCheck() { 
if (document.getElementById('yesCheck').checked) { 
    document.getElementById('ifYes').style.display = 'block'; 
} else { 
    document.getElementById('ifYes').style.display = 'none'; 
}

}

和你對於ifYes標籤

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

來源

2013-07-12 18:35:21 Zale

使用visibility財產HTML行隻影響頁面上的元素的可見性;他們仍然會在頁面佈局中。要從頁面中完全刪除元素，請使用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

來源

2013-07-12 18:44:25 Dolchio

***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>***

來源

2014-02-08 14:16:38 radhika

你可以用非常簡單的步驟

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


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

});

來源

2014-03-09 14:30:39 Shube

如何顯示和隱藏輸入字段基於無線電按鈕選擇

SCRIPT

HTML

回答

相關問題