当前位置:首页 > 首页 > 服务范围 > 微信小程序开发 > 微信小程序实现多选框全选与取消全选功能示例

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

时间:2022-05-21
网上参考资料:
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>

实践效果:


单选部分

<view wx:if="{{is_seletAll}}data-id="{{item.id}}bindtap="selectThis">
    <view class="sold mask"></view>
    <image class="chksrc="/images/icocheck{{item.checked ? '_active' : ''}}.png"></image>

</view>

多选部分:

<image src="/images/icocheck{{is_seletAll ? '_active' : ''}}.png"></image><text> 全选</text>


selectThis: function (e) { //选择与反选
    const that = this;
    var id = e.currentTarget.dataset.id;
    for (let i = 0; i < that.data.orderGoodsList.length; i++{
      if (that.data.orderGoodsList[i].id == id{
        that.data.orderGoodsList[i].checked = (!that.data.orderGoodsList[i].checked)
      }
    }
    that.setData({
      orderGoodsList: that.data.orderGoodsList
    })
  },
  selectAll: function () { //全选与反全选
    const that = this;
    for (let i = 0; i < that.data.orderGoodsList.length; i++{
      that.data.orderGoodsList[i].checked = (!that.data.is_seletAll)
    }
    that.setData({
      orderGoodsList: that.data.orderGoodsList,
      is_seletAll: (!that.data.is_seletAll)
    })
  }
首页
案例中心
关于我们
联系我们