微信小程序实现多选框全选与取消全选功能示例

2020-03-21 15:56:40

字体：大中小

来源：转载

供稿：网友

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

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;}

效果图：

微信小程序,多选框,全选