昨天一个同行妹纸写了一个网络问卷调查的效果，但是有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. Python全栈开发【re正则模块】

    re正则模块 本节内容: 正则介绍 元字符及元字符集 元字符转义符 re模块下的常用方法 正则介绍(re) 正则表达式(或 RE)是一种小型的.高度专业化的编程语言. 在Python中,它内嵌在Pyt ...

  2. Debian-based Linux distributions 安装 virtualbox

    Add the following line to your /etc/apt/sources.list: deb http://download.virtualbox.org/virtualbox/ ...

  3. java dom4j封装和解析XML

    package org.scbit.lsbi.scp.utils; import java.util.ArrayList; import java.util.List; import org.dom4 ...

  4. cron 任务

    相关文件 /etc/crontab /etc/cron.deny 设置哪个用户有权限运行 cron 任务 /var/spool/cron/root /var/spool/cron/user /var/ ...

  5. 第二天--html

    <!DOCTYPE html><!--设置文档类型为标准的html5模型--><html>    <head>        <meta char ...

  6. C# 类使用小demo

    太晚了,不说了,直接上图 运行结果

  7. windows下webstorm开发react-native智能提示

    webstorm破解版地址:点这里 1.随便在一个目录下下载ReactNative-LiveTemplate插件,命令为: git clone https://github.com/virtoolsw ...

  8. IIS6.0 web.config

    IIS6.0环境下,要把托管管道模式 改为:经典. <?xml version="1.0" encoding="UTF-8"?> <confi ...

  9. canvas星星炫耀

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. jsonp是什么【转载自JavaScript微信公众号】

    转自 http://mp.weixin.qq.com/s/xNnKAeLv6sO0T-IvP2AUlQ          JavaScript微信公众号 一.JSONP的诞生 首先,因为ajax无法跨 ...