第微信小程序復選框組件使用詳解在工作中頻繁用到復選框，于是自己寫了個組件，增加其復用性，提高效率。

先看效果圖：

提交后得到一個選中項的id組成的數(shù)組

下邊直接上代碼：

代碼地址為：components/checkGrop/checkGrop

wxml:

formbindsubmit="formSubmit"

view

!--一級菜單--

scroll-viewscroll-y

blockwx:for="{{list}}"wx:key="item"

viewcatchtap='ontap'data-index='{{index}}'style='{{n==index"border-left:8rpxsolid#1aad16;color:#1aad16":""}}'

{{item.istitle}}

viewhidden="{{checked[index].length0false:true}}"

text{{allNum[index]allNum[index]:(checked[index].length0checked[index].length:0)}}/text

/view

/view

/block

/scroll-view

!--二級菜單--

scroll-viewscroll-y

view

!--二級菜單中的全部選項--

labelcatchtap='all'

checkboxvalue="{{childlist[n][0].value}}"checked="{{childlist[n][0].checked}}"/

view

icontype="circle"size="23"wx:if="{{!childlist[n][0].checked}}"/icon

icontype="success"size="23"wx:if="{{childlist[n][0].checked}}"/icon

/view

view{{childlist[n][0].istitle}}/view

/label

checkbox-groupbindchange="checkboxChange"

!--二級菜單中的剩余選項--

blockwx:for="{{childlist[n]}}"wx:key="value"

labelwx:if='{{item.istitle!="全部"}}'

checkboxvalue="{{item.id}}"checked="{{item.checked}}"/

view

icontype="circle"size="23"wx:if="{{!item.checked}}"/icon

icontype="success"size="23"wx:if="{{item.checked}}"/icon

/view

view{{item.istitle}}/view

/label

/block

/checkbox-group

/view

/scroll-view

/view

view

buttoncatchtap='back'返回/button

buttonformType="submit"提交/button

/view

/form

wxss:

page{

background:#f8f8f8;

.content{

position:absolute;

top:0;

bottom:100rpx;

width:100%;

.scrollLeft{

box-sizing:border-box;

float:left;

width:25%;

height:100%;

border-right:1rpxsolid#ddd;

font-size:35rpx;

.scrollRight{

float:left;

width:75%;

height:100%;

.leftBox{

position:relative;

box-sizing:border-box;

width:100%;

height:100rpx;

display:flex;

justify-content:center;

align-items:center;

border-bottom:1rpxsolid#ddd;

.num{

position:absolute;

top:10rpx;

right:10rpx;

width:30rpx;

height:30rpx;

display:flex;

justify-content:center;

align-items:center;

background-color:#f10215;

border-radius:50%;

color:white;

font-size:22rpx;

.rightBox{

box-sizing:border-box;

width:100%;

.weui-cells{

position:relative;

margin-top:1.17647059em;

background-color:#FFFFFF;

line-height:1.41176471;

font-size:17px;

.weui-cells_after-title{

margin-top:0;

.weui-cell{

padding:10px15px;

position:relative;

display:-webkit-box;

display:-webkit-flex;

display:flex;

-webkit-box-align:center;

-webkit-align-items:center;

align-items:center;

.weui-check__label:active{

background-color:#ECECEC;

.weui-check{

position:absolute;

left:-9999px;

.weui-check__hd_in-checkbox{

padding-right:0.35em;

.weui-icon-checkbox_circle,

.weui-icon-checkbox_success{

margin-left:4.6px;

margin-right:4.6px;

.weui-cell__bd{

-webkit-box-flex:1;

-webkit-flex:1;

flex:1;

.btn-area{

position:absolute;

bottom:0;

width:100%;

height:100rpx;

display:flex;

justify-content:space-between;

align-items:center;

margin-top:20rpx;

.btn-areabutton:first-child{

width:30%;

height:80%;

color:white;

background-color:orange;

display:flex;

justify-content:center;

align-items:center;

.btn-areabutton:last-child{

width:65%;

height:80%;

color:white;

background-color:#1aad16;

display:flex;

justify-content:center;

align-items:center;

}

json:

{

"component":true

}

js:

Component({

properties:{

list:{

type:Array,

value:[],

},

select:{

type:Array,

value:[],

}

data:{

childlist:[],

n:0,

checked:[],

allNum:[],

ready(){

varthat=this;

varlist=that.data.list;//傳遞過來的數(shù)據(jù)

//console.log(list)

varselect=that.data.select;

varchecked=newArray;

varallNum=[];

varaaa=[];

//檢查默認選中狀態(tài)

for(leti=0;ilist.length;i++){

for(letk=0;klist[i].childlist.length;k++){

for(letj=0;jselect.length;j++){

if(list[i].childlist[k].id==select[j]){

aaa=[];

//若某條二級數(shù)組中存在多個選中的項要做判斷篩選

if(checked[i]){

//check中第i項如果存過值，那么將在此項中繼續(xù)加入值

checked[i].forEach(function(item){

aaa.push(item);

})

aaa.push(list[i].childlist[k]);

checked[i]=aaa;

}else{

//check中第i項沒有存過值，那么將值存入第i項

if(list[i].childlist[k].istitle=="全部"){

for(lets=0;slist[i].childlist.length;s++){

list[i].childlist[s].checked=true

allNum[i]=list[i].childlist.length-1;

checked[i]=[list[i]];

}

}else{

checked[i]=[list[i].childlist[k]];

}

}

list[i].childlist[k].checked=true;

}

}

}

}

that.setData({

'childlist[0]':list[0].childlist,

list:list,

checked:checked,

allNum:allNum,

})

console.log(checked);

console.log(allNum);

methods:{

ontap(e){

varthat=this;

varn=e.currentTarget.dataset.index;

varchildlist="childlist["+n+"]";

that.setData({

[childlist]:that.data.list[n].childlist,

n:n

})

},

all(){

varthat=this;

varn=that.data.n;

varchildlist="childlist["+n+"]";

varchecked="checked["+n+"]";

varallNum="allNum["+n+"]";

varall="";

varcheckArr=[];

varcheckboxItems=that.data.childlist[n];

if(checkboxItems[0].checked){

checkboxItems[0].checked=true;

checkArr=[];

}else{

checkboxItems[0].checked=false;

//checkArr.push(checkboxItems[0])

checkArr.push(that.data.list[n])

all=checkboxItems.length-1;

}

checkboxItems[0].checked=!checkboxItems[0].checked

for(letk=1;kcheckboxItems.length;k++){

checkboxItems[k].checked=checkboxItems[0].checked;

}

console.log(checkboxItems);

that.setData({

[childlist]:checkboxItems,

[checked]:checkArr,

[allNum]:allall:0,

},function(){

console.log(that.data.checked);

})

},

checkboxChange(e){

varthat=this;

varn=that.data.n;

console.log('checkbox發(fā)生change事件，攜帶value值為：',e.detail.value)

varcheckboxItems=that.data.childlist[n];

varvalues=e.detail.value;

varflag="";

varchildlist="childlist["+n+"]";

varchecked="checked["+n+"]";

varallNum="allNum["+n+"]";

varcheckedArr=[];

varall="";

for(vari=0,lenI=checkboxItems.length;ilenI;++i){

checkboxItems[i].checked=false;

for(varj=0,lenJ=values.length;jlenJ;++j){

if(checkboxItems[i].id==values[j]){

checkboxItems[i].checked=true;

checkedArr.push(checkboxItems[i]);

break;

}

}

}

if(values.length==checkboxItems.length-1){

checkboxItems[0].checked=true;

//checkedArr=[checkboxItems[0]];

checkedArr=[that.data.list[n]];

all=checkboxItems.length-1;

}

this.setData({

[childlist]:checkboxItems,

[checked]:checkedArr,

[allNum]:all

});

//console.log(checkedArr)

},

formSubmit:function(e){

varthat=this;

console.