<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function isopen(sobj){
var oDiv = document.getElementById("content1");
if(sobj.value=="yes"){/*这里避免一个bug。避免了没有选中的时候是不展开 */
oDiv.style.display="block";
}
else{
oDiv.style.display="none";
}
}
function lookresult(){
var radios=document.getElementsByName("no1");
var is=true;
var values=0;
for(var i=0;i<radios.length;i++){
if(radios[i].checked){
is=false;
values=parseInt(radios[i].value);
}
}
if(is){
document.getElementById("wo").innerHTML="没有选中答案，请选择答案！！！".fontcolor("red");
return;
}
if(values<=3){/*这里要注意一个开一个就要关 */
document.getElementById("res1").className="open";
document.getElementById("res2").className="close";
}
else{
document.getElementById("res1").className="close";
document.getElementById("res2").className="open";
}
}
</script>
<style type="text/css">
.open{
display:block;
}
.close{
display:none;
}
</style>
</head>
<body>
<h1>演示radio组件的用法</h1>
你参加问卷调查吗？<input type="radio" value="yes" name="same" onclick="isopen(this)"/>是
<input type="radio" value="no" name="same" checked="checked" onclick="isopen(this)"/>否<!--这里是先默认为不展开，默认先选择no -->
<div id="content1" >
问卷内容：<br/>
姓名：<input type="text"><br/>
邮箱：<input type="text"><br/>
</div>
<hr>
<h2>欢迎来参加性格测试</h2>
<ul><!-- 这个选择的题目可以用ul无序表来封装！ -->
<li><h6>第一题：</h6></li>
<li><a><input type="radio" value="1" name="no1" >梨子</a></li>
<li><a><input type="radio" value="2" name="no1" >苹果</a></li>
<li><a><input type="radio" value="3" name="no1" >香蕉</a></li>
<li><a><input type="radio" value="4" name="no1" >葡萄</a></li>
<li><a><input type="radio" value="5" name="no1" >桃子</a></li>
<li><a><input type="radio" value="6" name="no1" >西瓜</a></li>
<li><a><input type="radio" value="7" name="no1" >哈密瓜</a></li>
</ul>
<input type="button" value="查看检测结果" onclick="lookresult()">
<div id="res1" class="close">1~3:性格开朗，建议。。。。。。</div>
<div id="res2" class="close">4~7:性格奔放，建议。。。。。。</div>
<span id="wo"></span>
</body>
</html>