网络问卷调查js实现代码
昨天一个同行妹纸写了一个网络问卷调查的效果，但是有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");
}
}
});
网络问卷调查js实现代码的更多相关文章
- 响应式js幻灯片代码一枚
网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码
在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...
- ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）
(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...
- c#判断网络连接状态示例代码
使用c#判断网络连接状态的代码. 代码: public partial class Form1 : Form { [DllImport() == true) { label1.Text = " ...
- 使用正则表达式匹配JS函数代码
使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
随机推荐
- Selenium Xpath Tutorials - Identifying xpath for element with examples to use in selenium
Xpath in selenium is close to must required. XPath is element locator and you need to provide xpath ...
- 导入maven工程错误
有时候导入maven工程会报空指针异常: An internal error occurred during: “Updating Maven Project”. java.lang.NullPoin ...
- Ubuntu 安装php+mysql 环境
新系统安装完毕后,首先运行apt-get update 更新apt库. 然后安装ssh,输入apt-get install openssh-server,安装ssh是为了可以远程操作,不然坐在机房实在 ...
- JS学习进阶中 come on!
1,定义新的属性来扩展对象 新方法:defineProperty() 实例: var data = {}: Object.defineProperty(data,"type",{ ...
- 使用#锚点时，jsp中不能有basePath
今天遇到一个前端问题,使用dtree点击父节点时能够点开,但是之后又left这块frame又回到了登录页面, 难道调用了history(-1)吗,鼠标放上去显示javascript:#,??,回到页面 ...
- Django框架-目录文件简介
Rhel6.5 Django1.10 Python3.5 Django框架-目录文件简介 1.介绍Django Django:一个可以使Web开发工作愉快并且高效的Web开发框架. 使用Django, ...
- Python 下载网络mp4视频资源
最近着迷化学, 特别是古代的冶炼技术,感叹古人的聪明. 春秋时期的炼铁方法是块炼铁,即在较低的冶炼温度下,将铁矿石固态还原获得海绵铁,再经锻打成的铁块.冶炼块炼铁,一般采用地炉.平地筑炉和竖炉3种.铁 ...
- GruntJS学习（转）
GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lin ...
- Cocos2d-x 生成真正的随机数
关于随机数 cocos2d-x 定义了一个宏 CCRANDOM_0_1 生成的是 [0, 1] 之间的值 因此,要生成 [0-100] 之间的数 CCRANDOM_0_1 * 100 生成 [ ...
- eclipse 创建maven web项目
参考:http://www.cnblogs.com/hongwz/p/5456616.html eclipse 创建maven web项目