今天研究了一下微信小程序，同事有一个问题，希望实现点击一个复选选中多个复选的，取消一个复选取消多个复选  大复选不影响单个复选，在这里记录一下，因为写的是暂时实现，效率特别低，如果大家有什么好的想法欢迎留言！
wxml：
  <form bindsubmit="formSubmit" bindreset="formReset">  <view>
     <view>checkbox</view>
     <checkbox-group name="city" bindchange="shengChange">    <view wx:for="{{sheng}}"> 
          <label><checkbox  value="{{item.areaprovincecode}}"/>{{item.areaprovince}}</label>
            <view wx:for="{{item.areaCityList}}">
                <label><checkbox checked='{{item.checked}}' value="{{item.areaprovincecode}}"/>{{item.areaprovince}}</label>
            </view>
     </view>
     </checkbox-group>   </view>   <view>
     <button formType="submit">Submit</button>
     <button formType="reset">Reset</button>   </view> </form>

js：

首先有一个顶级变量
 //用来存储选中的省的值
 var checkedId=[];


shengChange :function(e){
    //总地区
     var list=this.data.sheng;
    
    //当前选中的所有复选框值
     var pagelist = e.detail.value;
    
     for (var a = 0; a < list.length;a++){
      //先是新增复选  当前选择循环>已选择省份循环
       for (var b = 0; b < pagelist.length;b++){
         if (list[a].areaprovincecode == pagelist[b]){
           if (checkedId.length==0){
             checkedId.push(pagelist[b]);
             for (var h = 0; h < list[a].areaCityList.length; h++) {
               this.setData({
                 ["sheng[" + a + "].checked"]: true,
                 ["sheng[" + a + "].areaCityList[" + h + "].checked"]: true
               })
             }
           }else{
             var xz=true;
             for (var z = 0; z < checkedId.length;z++){
               if (pagelist[b] == checkedId[z]){
                  xz=false;
               }
             }
             if (xz){
               checkedId.push(pagelist[b]);
               
               for (var h = 0; h < list[a].areaCityList.length; h++) {
               this.setData({
                 ["sheng[" + a + "].checked"]: true,
                 ["sheng[" + a + "].areaCityList[" + h + "].checked"]: true
               })
               }
             }
           }
         }
       }
     
      //后是删除省复选  已选择省份循环>当前选择省份循环
       for (var c = 0; c < checkedId.length;c++){
           if (checkedId.length!=0){
             var qx=true;
             for (var i = 0; i < pagelist.length;i++){
               if (checkedId[c] == pagelist[i]){
                  qx=false;
               }
             }
             if(qx){
               if (checkedId[c] == list[a].areaprovincecode){
                 checkedId.splice(c, 1);
                 
                 for (var h = 0; h < list[a].areaCityList.length;h++ ){
                   this.setData({
                     ["sheng[" + a + "].checked"]: false,
                     ["sheng[" + a + "].areaCityList[" + h + "].checked"]: false
                   })
                 }
                }
             }
          }
       }
     }
   },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }，

截取一段数据：
sheng:[{
    "id": null,
    "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae5",
    "areastate": "Y",
    "areaprovince": "河北省",
    "areaprovincecode": "15613",
    "areacitycode": "156",
    "areaCityList": [
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae6",
        "areastate": "Y",
        "areaprovince": "石家庄",
        "areaprovincecode": "156130100",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae7",
        "areastate": "Y",
        "areaprovince": "保定",
        "areaprovincecode": "156130600",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae8",
        "areastate": "Y",
        "areaprovince": "廊坊",
        "areaprovincecode": "156131000",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5ae9",
        "areastate": "Y",
        "areaprovince": "邯郸",
        "areaprovincecode": "156130400",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5001",
        "areastate": "Y",
        "areaprovince": "邢台",
        "areaprovincecode": "156130500",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5002",
        "areastate": "Y",
        "areaprovince": "唐山",
        "areaprovincecode": "156130200",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5003",
        "areastate": "Y",
        "areaprovince": "秦皇岛",
        "areaprovincecode": "156130300",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5004",
        "areastate": "Y",
        "areaprovince": "承德",
        "areaprovincecode": "156130800",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5005",
        "areastate": "Y",
        "areaprovince": "张家口",
        "areaprovincecode": "156130700",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5006",
        "areastate": "Y",
        "areaprovince": "沧州",
        "areaprovincecode": "156130900",
        "areacity": null,
        "areacitycode": "15613"
      },
      {
        "id": null,
        "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5007",
        "areastate": "Y",
        "areaprovince": "衡水",
        "areaprovincecode": "156131100",
        "areacity": null,
        "areacitycode": "15613"
      }
    ]
  },
   {
     "id": null,
     "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5008",
     "areastate": "Y",
     "areaprovince": "山东省",
     "areaprovincecode": "15637",
     "areacitycode": "156",
     "areaCityList": [
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5009",
         "areastate": "Y",
         "areaprovince": "济南",
         "areaprovincecode": "156370100",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5010",
         "areastate": "Y",
         "areaprovince": "青岛",
         "areaprovincecode": "156370200",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5011",
         "areastate": "Y",
         "areaprovince": "聊城",
         "areaprovincecode": "156371500",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5012",
         "areastate": "Y",
         "areaprovince": "德州",
         "areaprovincecode": "156371400",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5013",
         "areastate": "Y",
         "areaprovince": "东营",
         "areaprovincecode": "156370500",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5014",
         "areastate": "Y",
         "areaprovince": "淄博",
         "areaprovincecode": "156370300",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5015",
         "areastate": "Y",
         "areaprovince": "潍坊",
         "areaprovincecode": "156370700",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5016",
         "areastate": "Y",
         "areaprovince": "烟台",
         "areaprovincecode": "156370600",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5017",
         "areastate": "Y",
         "areaprovince": "威海",
         "areaprovincecode": "156371000",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5018",
         "areastate": "Y",
         "areaprovince": "日照",
         "areaprovincecode": "156371100",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5019",
         "areastate": "Y",
         "areaprovince": "临沂",
         "areaprovincecode": "156371300",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5020",
         "areastate": "Y",
         "areaprovince": "枣庄",
         "areaprovincecode": "156370400",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5021",
         "areastate": "Y",
         "areaprovince": "济宁",
         "areaprovincecode": "156370800",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5022",
         "areastate": "Y",
         "areaprovince": "泰安",
         "areaprovincecode": "156370900",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5023",
         "areastate": "Y",
         "areaprovince": "莱芜",
         "areaprovincecode": "156371200",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5024",
         "areastate": "Y",
         "areaprovince": "滨州",
         "areaprovincecode": "156371600",
         "areacity": null,
         "areacitycode": "15637"
       },
       {
         "id": null,
         "areaid": "JDQY3e8a7c53-976c-4472-a22a-767b563c5025",
         "areastate": "Y",
         "areaprovince": "菏泽",
         "areaprovincecode": "156371700",
         "areacity": null,
         "areacitycode": "15637"
      }
     ]
   }
]

编程一路，长且险，诸位共勉！

查了好多资料复选框写的磨磨叽叽的一大堆废话！
我来教大家写一个原生jq的复选框样式,简单实用,又不会耽误checkbox的调用。
html:
<label class="checklist iCheck">
<input class="checkbox" type="checkbox"/>
<span>沪深A股</span>
</label>

css:
/* 复选框自定义样式 Start */
/* label 图片浮动，一般不浮动会显示不全 */
.checklist{float:left;}
/* checkbox 原复选框隐藏 */
.checkbox{opacity:0;filter:alpha(opacity=0);}
/* label 的背景图片 iCheck未选中 iCheck-ed选中 */
.iCheck{background:url(../img/chk_bg1.png) no-repeat;}
.iCheck-ed{background:url(../img/chk_bg2.png) no-repeat;}

/* 复选框自定义样式 End */


js/jq:
$(document).ready(function () {
//判断当前复选框状态，并让label背景图与复选框同步勾选或取消
$(".checkbox").click(function (){
//判断复选框勾选状态
if ($(this).is(':checked')) {
$("label").removeClass("iCheck");    //删除未勾选选背景图
$("label").addClass("iCheck-ed");    //添加勾选态背景图
}else{
$("label").removeClass("iCheck-ed"); //删除勾选选背景图
$("label").addClass("iCheck");       //添加未勾选选背景图
}
});

});




  这是css中需要的两个图片，你可以直接保存。
其实你可以做成任意样式，只要你的ps还看的过去。
假如你能ps出常见的十个精美复选框样式：http://blog.csdn.net/chelen_jak/article/details/44827393

那你就完全没有必要用人家的！

得到的样子：
这是一个最简单的例子！
如果你会js/jq，完全可以自己写，写出你想要的东西！
假如你还是不会，那么可以去下载我的例子，已经打包好就等你下载了！
除了这个简单的例子还有一个大的复杂复选框表单，两个例子你可以一起下载。（大的只是js上的逻辑有变化）
简单小例子下载不要积分：
http://download.csdn.net/detail/liujunxin11/9399314

简单的小例子+复杂的大例子=需要3积分：
http://download.csdn.net/detail/liujunxin11/9399307

上图 



样式是默认的，其实自己可以改些CSS样式更好看些 

代码全：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 单个,多个复选框</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>
</body>
</html>

下面是点击复选框事件

<template>
    <div id="secert-main">
         <label for="label" @change="clickMe">
                <input type="checkbox" id="label" v-model="ckeckVal" >点我
        </label>
        <p :class="ckeckClass">复选框没有被选中</p>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
            return {
                ckeckVal:false,
                ckeckClass:'',
                ckeckInfo:'复选框没有被选中'
            }
        },
        methods:{
    clickMe(){
        var that=this;
        if(that.ckeckVal){
            that.ckeckInfo='复选框被选中了';
            that.ckeckClass='red';
        }else{
            that.ckeckInfo='复选框没有被选中';
            that.ckeckClass='';
        }
    }
  }
}
</script>
<style type="text/css">
.red{
        color: red;
    }
</style>

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

 
非常棒的一个JS复选框控制代码,经常在网站上看到的，在很大一堆的选择框面前，如果你选择的其中一个复选框，那么和它相反的选项就会变为灰色，成为不可选
<script>
 function f1(chk){ 
var t = document.getElementById("txt1"); t.disabled = !chk.checked;
 } 
</script>
 <input type=checkbox οnclick="f1(this)"> 
<input type=text id="txt1" disabled="disabled">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>选中复选框，相关类变灰</title>
<script language="JavaScript">
  <!--
function selectKind(the){
var obj = the;
var container = document.getElementById("kind_" + obj.name);
for(var i=0;i<container.getElementsByTagName("input").length;i++)
{
container.getElementsByTagName("input")[i].disabled = obj.checked;
}

}
//-->
</script>
</head>
<body>
<input type='checkbox' value="2" name=aa οnclick="selectKind(this)">我从事游戏编程
<div id="kind_aa">
<input type='checkbox' value="php" name=aa>PHP  
<input type='checkbox' value="asp.net" name=aa>ASP.NET
<input type='checkbox' value="java" name=aa>JAVA
</div>
<input type='checkbox' value="1" name=bb οnclick="selectKind(this)">平时不上网
<div id="kind_bb">
<input type='checkbox' value="baidu.com" name=bb>baidu.com  
<input type='checkbox' value="163.com" name=bb>163.com
<input type='checkbox' value="codefans.net" name=bb>codefans.net
</div>
</body>
</html>