php 微信小程序 循环 多选,微信小程序checkbox全选多选效果实现代码

这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图：

wxml代码：

全选

汪小涵 管理员

总监

wxss代码：

.memberList{

background:#fff;

padding:0 35rpx 0 28rpx;

}

.allSelect_box{

line-height:90rpx;

border-bottom:1rpx solid #F5F5F5;

}

.checkbox{

transform: scale(0.7,0.7);

}

.member_box .checkbox{

margin-top: 15rpx;

}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {

color:#fff;

background: #6669e3;

border-color:#6669e3;

}

.allSelect{

margin-left:15rpx;

vertical-align:middle;

}

.member_box{

padding-bottom:30rpx;

display: flex;

border-bottom:2rpx solid #EBEBEB;

padding:20rpx 0 20rpx 0;

}

.avatar{

width:100rpx;

border-radius:50%;

margin-left:15rpx;

}

.applicant_name{

font-size:34rpx;

padding:0 0 15rpx 30rpx;

}

.applicant_name text{

color:#fff;

background:#6669e3;

font-size:28rpx;

padding:5rpx 10rpx;

border-radius:10rpx;

margin-left:15rpx;

}

.approval_state{

color:#8D8D8D;

font-size:28rpx;

padding-left: 30rpx;

}

js代码：

data: {

list: [

{ id: 1, name: 1, checked: false },

{ id: 2, name: 2, checked: false },

{ id: 3, name: 3, checked: false },

{ id: 4, name: 4, checked: false },

],

selectilall: false

},

//单选

select: function (e) {

let selectValue = e.currentTarget.dataset.name

let index = e.currentTarget.dataset.index;

let list = this.data.list

let newli = 'list[' + index + '].checked';

this.setData({

[newli]: !this.data.list[index].checked

})

let num = 0;

for(var i=0;i

if(this.data.list[i].checked){

num++;

}

}

if(num == this.data.list.length){

this.setData({

selectilall: true

})

}else{

this.setData({

selectilall: false

})

}

},

//全选，取消全选

selectAll: function (e) {

let list = this.data.list;

let selectilall = this.data.selectilall;

if (selectilall == false) {

for (let i = 0; i < list.length; i++) {

let newli = 'list[' + i + '].checked';

this.setData({

[newli]: true,

selectilall: true

})

}

} else {

for (let i = 0; i < list.length; i++) {

let newli = 'list[' + i + '].checked';

this.setData({

[newli]: false,

selectilall: false

})

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助。