这是我写的第一篇文章,如有不对,请你们指正,多谢!
这篇文章主要讲小程序的全选。接触小程序没有过久,我想每实现一个功能就在这里记录一次,以此巩固。
其实实现很简单,在每一个选择集合中加入一个isCheck字段,默认是false(未选中),而后wxml页面中循环list时,给checkbox加一个属性:checked='{{item.isCheck}}';
接下来是js,在全选按钮上绑定事件:checkAll。js中首选要获得全部的list(var list = that.data.Data);而后for循环list,在循环中让每个isCheck取反;以后,在循环外setData咱们上文声明的list:that.setData({Data:list}),意思就是把咱们操做过的list从新赋给Data,页面会从新渲染;废话很少说,如下是代码:小程序
wxml: <view class='atte-title'> <view class='odb-title-left'>选择参会人</view> <checkbox value='全选' bindtap='checkAll'></checkbox> </view> <checkbox-group bindchange='change'> <block wx:for='{{Data}}' wx:key> <checkbox value='{{item.name}}' checked='{{item.isCheck}}' class='check-item' style='background:#fff;'> <view class='check-box'> <view class='atte-ava'> <image src='{{item.Image}}'></image> </view> <view class='atte-name'>{{item.name}}</view> <view class='atte-point'> <image src='/images/Articles/point.png'></image> </view> <view class='atte-pro'>{{item.partyBranchJobTypeName}}</view> </view> </checkbox> </block> </checkbox-group>
// 全选 checkAll: function (e) { var that = this console.log(that.data.Data) var list = that.data.Data for (var i = 0; i < list.length;++i){ list[i].isCheck = !list[i].isCheck || false; //list[i].isCheck默認是false,这里是取反 } that.setData({ Data:list, //将取反后的集合setData到咱们的Data }) },
小白一枚,水平不好,请多指教;this