昨天一個同行妹紙寫了一個網絡問卷調查的效果，但是有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");
}
}
});