昨天一个同行妹纸写了一个网络问卷调查的效果，但是有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实现代码DEMO下载

网络问卷调查js实现代码的更多相关文章

  1. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  6. ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  7. c#判断网络连接状态示例代码

    使用c#判断网络连接状态的代码. 代码: public partial class Form1 : Form { [DllImport() == true) { label1.Text = " ...

  8. 使用正则表达式匹配JS函数代码

    使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...

  9. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

随机推荐

  1. iOS coredata 数据库的加密（待研究）

    https://github.com/project-imas/encrypted-core-data 使用起来很方便,底层还是使用了SQLCipher,有时间要研究一下! 数据库的密码不能用固定字符 ...

  2. linux系统的初化始配置（包括网络，主机名，关闭firewalld与selinux）

    每次我们使用Linux都会对系统进行初始化的配置,下面我们一一列出来. 1.服务的开启 systemctl enable firewalld.service //将指定的服务设置为开机启动 syste ...

  3. day7

    本节作业: 选课系统 角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. ...

  4. Winform的"透明"

    手头目前的一个项目(.Net4.0)中有这样一个需求:在程序中要进行视频采集,并且要在视频影像区域进行绘图编辑,对绘图能进行拉伸,拖拽和删除.从需求来看,必须得在视频影像区的上方盖一层画布才能这么操作 ...

  5. struts2笔记（3）

    关于回显: 如果是int型,默认就会回显为0,如果不想让回显,则Integer就好 //**************************************声明式验证************* ...

  6. Ubuntu16.04安装Atom

    转自:http://blog.csdn.net/q1302182594/article/details/51304401 sudo add-apt-repository ppa:webupd8team ...

  7. 使用Spring整合Quartz轻松完成定时任务

    一.背景 上次我们介绍了如何使用Spring Task进行完成定时任务的编写,这次我们使用Spring整合Quartz的方式来再一次实现定时任务的开发,以下奉上开发步骤及注意事项等. 二.开发环境及必 ...

  8. js中的斐波那契数列法

    //斐波那契数列:1,2,3,5,8,13…… //从第3个起的第n个等于前两个之和 //解法1: var n1 = 1,n2 = 2; for(var i=3;i<101;i++){ var ...

  9. 3ds max旋转简化后模型

    简化后的模型无法与原场景直接匹配,因此需要以下步骤: 简化后的模型导入,原点在右上角 旋转后,方法是选中所有模型,右键->旋转 在偏移的x和y各输入180 还有做一些平移,微调 在导入整个she ...

  10. 在ubuntu下安装google chrome

    由于手上有两台电脑,再加上我那个选择困难症加上纠结劲.所以果断把其中一台电脑只装linux系统,另一台电脑只装windows了.免得我老纠结!于是linux便选择了ubuntu. 由于浏览器一直用的是 ...