微信小程序 多选框全选与取消全选

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)

})}

})

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

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

}

效果图：