<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>單選按鈕</title>
<style type="text/css">
#all div{
display:none;
}
</style>
<!-- 引入jquery庫 -->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javaScript">
/* 性格測試 */
function show(obj){
//在當前div顯示之前, 先將所有div設置為隱藏
//$("#all").find("div").hide();
$("div[id^='result']").hide();
//根據input選項的value值獲取對應div的id值
$("#result"+$(obj).val()).show();
}
</script>
</head>
<body>
<div>
<h3>測試你的性格:</h3>
<div>請選擇下列一種水果:</div>
<input type="radio" name="fruit" value="1" onclick="show(this)" />蘋(píng)果<br />
<input type="radio" name="fruit" value="2" onclick="show(this)" />西瓜<br />
<input type="radio" name="fruit" value="3" onclick="show(this)"/>葡萄<br />
<input type="radio" name="fruit" value="4" onclick="show(this)"/>芒果<br />
<div id="all">
<div id="result1">
您的性格,很羞澀.
</div>
<div id="result2">
您的性格,很開(kāi)朗.
</div>
<div id="result3">
您的性格,很內向.
</div>
<div id="result4">
您的性格,很醇香.
</div>
</div>
</div>
</body>
</html>
本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請
點(diǎn)擊舉報。