微信小程序實現多選框全選與取消全選功能示例

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

效果圖：

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