小程序Checkbox全选

2024年5月8日 179次阅读 来源: Erxat

这是我写的第一篇文章，若有不对，请大家指正，多谢！
这篇文章主要讲小程序的全选。接触小程序没有太久，我想每实现一个功能就在这里记录一次，以此巩固。
其实实现很简单，在每个选择集合中加入一个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
    })
  },

小白一枚，水平很差，请多指教；

    原文作者：Erxat
    原文地址: https://segmentfault.com/a/1190000018673965
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞