怎么在微信小程序中实现一个全选多选效果

怎么在微信小程序中实现一个全选多选效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联主营五通桥网站建设的网络公司,主营网站建设方案,app软件定制开发,五通桥h5小程序设计搭建,五通桥网站营销推广欢迎五通桥等地区企业咨询

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
看完上述内容，你们掌握怎么在微信小程序中实现一个全选多选效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
            
            
                            

                分享文章：怎么在微信小程序中实现一个全选多选效果                

                标题来源：http://dzwzjz.com/article/ihcgsj.html