昨天一个同行妹纸写了一个网络问卷调查的效果，但是有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. kvm虚拟机静态和动态迁移

    一.kvm虚拟机静态迁移 1.静态迁移就是虚拟机在关机状态下,拷贝虚拟机虚拟磁盘文件与配置文件到目标虚拟主机中,实现的迁移. (1)虚拟主机各自使用本地存储存放虚拟机磁盘文件 本文实现基于本地磁盘存储 ...

  2. MongoDB学习笔记

    MongoDB的学习目标(v.3.4.0) 1.MongoDB的概念,非关系型数据库NOSQL 2.学会MongoDB的搭建 3.熟悉MongoDB使用 最基本的文档的读写更新删除 各种不同类型的索引 ...

  3. USB_HID读写上位机VC++

    在工程属性-->链接器-->添加以下库 open 打开,close 关闭,打开后将获得reader 与writer 的handle,分别进行读写即可 #pragma once #ifdef ...

  4. 循环获取DataTable

    DataTable ddtt = tq.Table("); string strName = ""; //DataTable ddtt = dataSet.Tables[ ...

  5. PEtools

    // PETools.cpp : Defines the entry point for the console application.// #include "stdafx.h" ...

  6. 372. Super Pow

    问题 Your task is to calculate ab mod 1337 where a is a positive integer and b is an extremely large p ...

  7. Android使用CountDownTimer倒计时

    1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android ...

  8. 使用Fiddler关于“由于目标计算机积极拒绝，无法连接。”的解决方案

    今天使用Fiddler的时候遇到下面这个问题:在地址栏想打开个一般处理程序,出现连接本机失败的提示,如下图: 而这在我没打开Fiddler的时候是显示正常的. 查看Fiddler,在嗅探 -> ...

  9. XMLFeedSpider例子

    from scrapy import log from scrapy.contrib.spiders import XMLFeedSpider from myproject.items import ...

  10. AOJ 0033 Ball【DFS】

    有一个筒,从A口可以放球,放进去的球可通过挡板DE使其掉进B管或C管里,现有带1-10标号的球按给定顺序从A口放入,问是否有一种控制挡板的策略可以使B管和C管中的球从下往上标号递增. 输入: 第一行输 ...