微信小程序如何实现多选框全选与取消全选功能？

本文共计502个文字，预计阅读时间需要3分钟。

原文：本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家，供大家参考，具体如下：

js部分：javascriptpage({ data: { select_all: false, listData: [ { code: 111, text: text1, typ: type1 }, { code: 221, text: text2, typ: type2 } ] }})

本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家供大家参考，具体如下：

js部分：

page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "111",text: "text1",typ: "type3",}]} selectall: function() {//全选与反全选 var that = this; for (let i = 0; i < that.data.listData.length; i++) { that.data.listData[i].checked = (!that.data.select_all)} that.setData({ listData: that.data.listData, select_all: (!that.data.select_all) })} })

wxml部分：

<view class="scroll"> <scroll-view scroll-x="true"> <checkbox-group class="table" > <view class="tr"> <view class="th"> <checkbox value="all" bindtap="selectall" />全选 </view> <view class="th">运号</view> <view class="th">V号</view> <view class="th">运商</view> <view class="th">返单</view> <view class="th">日期</view> </view> <view class="tr" wx:for="{{listData}}" wx:key=""> <view class="td"> <checkbox value="{{item.code}}" checked="{{item.checked}}" /> </view> <view class="td" value="{{item.text}}">{{item.code}}</view> <view class="td" value="{{item.text}}">{{item.text}}</view> <view class="td" value="{{item.typ}}">{{item.typ}}</view> <view class="td" value="{{item.typ}}">{{item.typ}}</view> <view class="td" value="{{item.typ}}">{{item.typ}}</view> </view> </checkbox-group> </scroll-view> </view> </view>

wxss部分：

.table{ background-color: #fff; border:1px solid #dadada; width:1200rpx; margin-left:0rpx; } .tr{ background-color: #dadada; white-space: nowrap; width:100%; display: flex; text-align: center; justify-content: center; } .th{ background-color: #fff999; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; } .td{ background-color: #fff; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; }

效果图：

希望本文所述对大家微信小程序开发有所帮助。