单选按钮技术演示---调查问卷为例

最新推荐文章于 2021-03-21 22:22:50 发布

大z小z

最新推荐文章于 2021-03-21 22:22:50 发布

阅读量727

点赞数

分类专栏： dhtml 文章标签： dhtml radio

本文链接：https://blog.csdn.net/qq_36171618/article/details/72312538

版权

dhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>单选按钮技术演示 </title>
<style type="text/css">
fieldset{
width:200px;
border: 1px solid blue;
}
ul{
list-style: none;
margin:0px;
padding: 0px;
/*background-color: red;*/
}
#qq{
display:none;
}

.close{
display:none;
}
.open{
display: block;
background-color:#80ffff;
width: 300px;
}
</style>
<script type="text/javascript">
function show(node){//当被调查者勾选yes后才会显现出来后面的内容
var oDivContent = document.getElementById("qq");
if(node.value =="yes"){
oDivContent.style.display ="block";
}else{
oDivContent.style.display ="none";
}
}

function showResult(){
var oNo1Radios = document.getElementsByName("no1");
var val=0;
var isSel=false;
for(var i=0;i<oNo1Radios.length;i++){
if(oNo1Radios[i].checked){
val = parseInt(oNo1Radios[i].value);
isSel = true;
break;
}
}
if(!isSel){
document.getElementById("errInfo").innerHTML = "请选择一个答案".fontcolor("red");
}else if(val>=1 && val<=3){
document.getElementById("res1").className="open";
document.getElementById("res2").className="close";
}else{
document.getElementById("res2").className="open";
document.getElementById("res1").className="close";
}
}
</script>
</head>
<body>
<h1>演示radio组件的用法 ----问卷调查形式</h1>
<fieldset>
<legend>xxxx问卷调查</legend>
<input type="radio" name="ask" value="yes" οnclick="show(this);">是    
<input type="radio" name="ask" vlaue="no" checked="checked" οnclick="show(this);">否
</fieldset><br/><br/>
<div id='qq'>
<div>
问卷内容<br/>
您的姓名：<input type="text"><br/>
您的性别：<input type="text"><br/>
</div>

<h2>欢迎参加此次性格问卷调查</h2>
<div id ="q1"></div>
<h3>第一题：</h3>
<span>您喜欢的水果是什么?</span>
<ul>
<li><input type="radio" name="no1" value="1"/>葡萄</li>
<li><input type="radio" name="no1" value="2"/>苹果</li>
<li><input type="radio" name="no1" value="3"/>梨子</li>
<li><input type="radio" name="no1" value="4"/>桃子</li>
<li><input type="radio" name="no1" value="5"/>哈密瓜</li>
</ul>
<div>
<input type="button" value = "结果显示" οnclick="showResult();"><br/>
<span id="errInfo"></span>
<div id="res1" class="close">1-3分:你的性格内向,建议....</div>
<div id="res2" class="close">4分以上:你的性格奔放,建议....</div>
</div>
</div>
</body>

</html>

调查者愿意参与问卷调查以后才能显示的内容

大z小z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选按钮技术演示---调查问卷为例

单选按钮技术演示 fieldset{width:200px;border: 1px solid blue;}ul{list-style: none;margin:0px;padding: 0px;/*background-color: red;*/}#qq{display:none;}.close{ display:none;
复制链接

扫一扫