<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*隱藏div的內容*/
#content {
display: none;
}
</style>
</head>
<body>
<!--
單選按鈕演示。
1.是否參加調查問卷？
2.性格測試。
-->
<script type="text/javascript">
function showContent(node) {
var oDivNode = document.getElementById("content");
if (node.value == "yes") {
oDivNode.style.display = "block";
} else {
oDivNode.style.display = "none";
}
}
</script>
<!-- 問卷調查 -->
<div>
您要參與調查問卷嗎:
<input type="radio" name="exam" value="yes" onclick="showContent(this)"/>是
<input type="radio" name="exam" value="no" checked="checked" onclick="showContent(this)"/>否
</div>
<div id="content">
問卷調查內容:<br/>
您的姓名:<input type="text" /><br/>
您的郵箱:<input type="text" /><br/>
</div>
</body>
</html>
在瀏覽器中的默認效果：
當選擇 “是” 時，隱藏的div就會顯示出來：
