<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*隱藏div的內容*/
#content {
display: none;
}
/*定義ul中的樣式*/
#ul_1 {
list-style: none;
margin: 0px;
}
/*定義選擇器來隱藏div的內容*/
.close {
display: none;
}
/*顯示div中的內容*/
.open {
display: block;
}
</style>
</head>
<body>
<!--
單選按鈕演示。
1.是否參加調查問卷？
2.性格測試。
-->
<!--性格測試 -->
<script type="text/javascript">
function showResult() {
var collRadioNodes = document.getElementsByName("text1");
var flag = false;
var value = 0;
for (var i = 0; i < collRadioNodes.length; i++) {
if (collRadioNodes[i].checked) {//如果該radio被選中
flag = true;
value = parseInt(collRadioNodes[i].value);
break;
}
}
if (!flag) {
document.getElementById("errinfo").innerHTML = "未選中答案，請選擇其中一個答案!".fontcolor('red');
return;
}
if (value >= 1 && value <= 3) {
document.getElementById("res_1").className = "open";
document.getElementById("res_2").className = "close";
document.getElementById("errinfo").className = "close";
} else {
document.getElementById("res_2").className = "open";
document.getElementById("res_1").className = "close";
document.getElementById("errinfo").className = "close";
}
}
</script>
<h2>歡迎您參與性格測試:</h2>
<div>
<h3>第一題:</h3>
<span>您喜歡的水果是什麼？</span>
<ul id="ul_1">
<li><input type="radio" value="1" name="text1"/>葡萄</li>
<li><input type="radio" value="2" name="text1"/>西瓜</li>
<li><input type="radio" value="3" name="text1"/>蘋果</li>
<li><input type="radio" value="4" name="text1"/>芒果</li>
<li><input type="radio" value="5" name="text1"/>櫻桃</li>
</ul>
</div>
<div>
<input type="button" value="查看測試結果" onclick="showResult()" />
<span id="errinfo" class="open"></span>
<div id="res_1" class="close">1-3分:你的性格內向，建議...</div>
<div id="res_2" class="close">4分及以上:你的性格外向，建議...</div>
</div>
<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>
<hr/>
<!-- 問卷調查 -->
<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>
在瀏覽器的的默認效果:
在不選任何答案情況下點擊按鈕：
在選擇其中一個答案時：
