网络问卷调查js实现代码
昨天一个同行妹纸写了一个网络问卷调查的效果，但是有bug，于是就来问我该如何解决这个bug。经过我的分析，bug主要还是出在复选框的那部分，经过修改，bug问题解决，现在贴出如下代码，仅供大家参考。
昨天一个同行妹纸写了一个网络问卷调查的效果，但是有bug，于是就来问我该如何解决这个bug。经过我的分析，bug主要还是出在复选框的那部分，经过修改，bug问题解决，现在贴出如下代码，仅供大家参考：
html code
<!DOCTYPE html>
<html>
<head>
<title>网络问卷调查</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
*{margin:0;padding:0;outline:0;}
html{font-size:62.5%;}
body{font-size:1.2rem;color:#666;font-family:"Helvetica";}
li{list-style:none;}
h2{font-size:1.5rem;font-weight:normal;color:#333;}
input[type="radio"], input[type="checkbox"]{-webkit-appearance:none;display:block;float:left;}
input[type="radio"]{border:1px solid #999;border-radius:50%;width:1.2rem;height:1.2rem;margin:6px 10px 0 0;}
input[type="radio"]:checked{background:url(images/radio_checked.png) no-repeat center top / 1.2rem 1.2rem;}
input[type="checkbox"]{background:url(images/checkbox.png) no-repeat center top / 1.2rem 1.2rem;width:1.2rem;height:1.2rem;margin:6px 10px 0 0;}
input[type="checkbox"]:checked{background:url(images/checkbox_checked.png) no-repeat center top / 1.2rem 1.2rem;}
.questionnaire{padding:1rem 1.5rem;}
.questionnaire .content{margin-top:.5rem;}
.content li{float:left;width:50%;height:2.2rem;line-height:2.2rem;}
.content ul{overflow:hidden;margin-top:.5rem;}
.content_seven li{width:100%;}
.content_other textarea{resize:none;width:98%;padding-left:2%;height:6.4rem;margin-top:1rem;line-height:2rem;}
#submit{width:100%;height:3rem;color:#fff;background:#9f9f9f;margin:3rem 0 2.7rem;border:0;}
</style>
</head>
<body>
<div class="questionnaire">
<div class="content">
<h2>1.你的性别是什么？</h2>
<ul>
<li><input type="radio" name="radio0"><span>男</span></li>
<li><input type="radio" name="radio0"><span>女</span></li>
</ul>
</div>
<div class="content">
<h2>2.你的年龄段是？</h2>
<ul>
<li><input type="radio" name="radio1"><span>20岁以下</span></li>
<li><input type="radio" name="radio1"><span>21岁~30岁</span></li>
<li><input type="radio" name="radio1"><span>31岁~40岁</span></li>
<li><input type="radio" name="radio1"><span>40岁以上</span></li>
</ul>
</div>
<div class="content">
<h2>3.你的学历是？</h2>
<ul>
<li><input type="radio" name="radio2"><span>高中及以下</span></li>
<li><input type="radio" name="radio2"><span>大学专科</span></li>
<li><input type="radio" name="radio2"><span>大学本科</span></li>
<li><input type="radio" name="radio2"><span>硕士及以上</span></li>
</ul>
</div>
<div class="content">
<h2>4.你的职业是？</h2>
<ul>
<li><input type="radio" name="radio3"><span>学生党</span></li>
<li><input type="radio" name="radio3"><span>上班族</span></li>
<li><input type="radio" name="radio3"><span>自由党</span></li>
</ul>
</div>
<div class="content">
<h2>5.你平时是否炒股？</h2>
<ul>
<li><input type="radio" name="radio4"><span>是</span></li>
<li><input type="radio" name="radio4"><span>否</span></li>
<li><input type="radio" name="radio4"><span>模拟炒股</span></li>
</ul>
</div>
<div class="content">
<h2>6.你对金融社交APP的看法？</h2>
<ul>
<li><input type="radio" name="radio5"><span>很感兴趣</span></li>
<li><input type="radio" name="radio5"><span>不懂金融是什么</span></li>
<li><input type="radio" name="radio5"><span>不感兴趣</span></li>
</ul>
</div>
<div class="content content_seven">
<h2>7.有了QQ你为什么还用钱眼?</h2>
<ul>
<li><input type="radio" name="radio6"><span>可以直接看股票及行情</span></li>
<li><input type="radio" name="radio6"><span>有高手互动</span></li>
<li><input type="radio" name="radio6"><span>可以和志同道合的朋友交流</span></li>
<li><input type="radio" name="radio6"><span>可以看讲师直播</span></li>
</ul>
</div>
<div class="content content_checkbox">
<h2>8.您最感兴趣的功能是？(多选)</h2>
<ul>
<li><input type="checkbox" name="checkbox"><span>大家问</span></li>
<li><input type="checkbox" name="checkbox"><span>话题</span></li>
<li><input type="checkbox" name="checkbox"><span>视频直播</span></li>
<li><input type="checkbox" name="checkbox"><span>金融工具</span></li>
<li><input type="checkbox" name="checkbox"><span>钱眼达人</span></li>
</ul>
</div>
<div class="content content_checkbox">
<h2>9.您最感兴趣的功能是？(多选)</h2>
<ul>
<li><input type="checkbox" name="checkbox1"><span>大家问</span></li>
<li><input type="checkbox" name="checkbox1"><span>话题</span></li>
<li><input type="checkbox" name="checkbox1"><span>视频直播</span></li>
<li><input type="checkbox" name="checkbox1"><span>金融工具</span></li>
<li><input type="checkbox" name="checkbox1"><span>钱眼达人</span></li>
</ul>
</div>
<div class="content">
<h2>10.如果看到一篇很好的帖子，您会想和作者聊聊吗？</h2>
<ul>
<li><input type="radio" name="radio8"><span>完全没有兴趣</span></li>
<li><input type="radio" name="radio8"><span>怕人家不理我</span></li>
<li><input type="radio" name="radio8"><span>可以线下认识吗</span></li>
<li><input type="radio" name="radio8"><span>线上交流很方便</span></li>
</ul>
</div>
<div class="content_other">
<h2>10.钱眼还能帮助你什么？（可不填）</h2>
<textarea maxlength="180" id="text"></textarea>
</div>
<button id="submit" disabled>提交</button>
</div>
<script src="js/zepto.min.js"></script>
</body>
</html>
js code
$(function(){
$(".content input[name^='radio']").click(function(){ //input[name='radio'] 单选按钮只要被点击且不管你点它多少次 他的选中状态都是true
$(this).parent("li").addClass("checked").siblings("li").removeClass("checked").parents(".content").attr("data-id","checkBox");
var contentLen = $(".content").length;
var checkLen = $("div[data-id='checkBox']").length;
checked(contentLen,checkLen);
});
$(".content_checkbox").each(function(){
var self = $(this);
$(this).find("input[name^='checkbox']").click(function(){
if(this.checked == true){
$(this).parent("li").addClass("checked");
}else{
$(this).parent("li").removeClass("checked");
}
if(self.find("li").hasClass("checked")){
self.attr("data-id","checkBox");
}else{
self.removeAttr("data-id");
}
var contentLen = $(".content").length;
var checkLen = $("div[data-id='checkBox']").length;
checked(contentLen,checkLen);
});
});
function checked(contentLen,checkLen){
if(contentLen == checkLen){
$("#submit").css({"background":"#3b7ded"}).removeAttr("disabled");
}else{
$("#submit").css({"background":"#9f9f9f"}).attr("disabled","disabled");
}
}
});
作者：小坏
出处：http://tnnyang.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。
