小程序的全选，多选

最新推荐文章于 2024-10-16 13:31:03 发布

王汪汪吖

最新推荐文章于 2024-10-16 13:31:03 发布

阅读量901

点赞数 1

分类专栏： js 文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_43791884/article/details/127542840

版权

js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

先来展示一下效果

全选状态

取消全选

把表中所有的单选按钮选了之后

在全选状态下取消了一个按钮

 <!-- 这个是每一项的选择按钮-->
<!-- data-index="{{index}}" 自定义属性 在js中通过单击事件中的形参e 你就可以获取到当前点击这一项的信息  形式就是data-XXX="{{XXX}}"-->
<view class="topBar"  data-index="{{index}}" catchtap="handleSelect">
 <image wx:if="{{item.select}}" src="../../assets/img/DeliveryService/selected.png" style="width: 46rpx;height: 46rpx; margin-top: 26rpx; margin-left: 20rpx;"></image>
<image wx:else src="../../assets/img/DeliveryService/unselect.png" style="width: 46rpx;height: 46rpx;  margin-top: 26rpx; margin-left: 20rpx;"></image>
</view>

<!-- 这个是全选按钮-->
<view class="twoImg" catchtap="handleSelectAll">
    <image  wx:if="{{selectAll}}" src="../../assets/img/DeliveryService/selected.png" style="width: 46rpx;height: 46rpx; margin-left:50rpx;"></image>
    <image  wx:else src="../../assets/img/DeliveryService/unselect.png" style="width: 46rpx;height: 46rpx;  margin-left:50rpx;"></image>
        <view class="SelectedAllText">全选</view>
</view>

单选中有一个handleSelect 点击事件

多选中有一个handleSelectAll 点击事件

//data中得定义如下数据
data:{
    shopInfo:''//这个是你接口的数据把它用this.setData({  shopInfo=res.data})
    selectAll:false,
    totalCount:'',
    tempCount:1 //如果是0那么当你单个点击把列表中所有的都选中之后全选这个按钮还是不会起作用
}
handleSelect(e){
    console.log(e);
    console.log(e.currentTarget.dataset.index);
    const index=e.currentTarget.dataset.index
    const shopInfo=this.data.shopInfo;

    let totalCount=this.data.totalCount;

    // 获取全选状态
    let selectAll=this.data.selectAll
    let tempCount=this.data.tempCount
    // 判断购物车列表select属性是否都为true
    shopInfo.forEach(cart=>{
      if(cart.select){
        tempCount++;
      }
      if(shopInfo.length==tempCount){
        selectAll=true
      }
    })

    // 设置选中或者不选中的状态
    shopInfo[index].select=!shopInfo[index].select;

    // 判断
    if(shopInfo[index].select){
      totalCount++;
    }else{
      totalCount--;
      selectAll=false
    }
    this.setData({
      shopInfo:shopInfo,
      totalCount:totalCount,
      selectAll:selectAll
    })
  },
  // 全选
  handleSelectAll(e){
    console.log(e);
    let selectAll=this.data.selectAll;
    let shopInfo=this.data.shopInfo;
    let totalCount=0;
    selectAll=!selectAll;
    shopInfo.forEach(cart=>{
      cart.select=selectAll
      if(cart.select){
        totalCount++;
      }
      else{
        totalCount=0
      }
    })
    this.setData({
      shopInfo:shopInfo,
      selectAll:selectAll,
      totalCount:totalCount
    })
  },