小程序购物车radio全选单选

最新推荐文章于 2024-08-01 21:41:04 发布

老男人，

最新推荐文章于 2024-08-01 21:41:04 发布

阅读量662

点赞数

分类专栏：小程序文章标签：小程序 javascript 开发语言

本文链接：https://blog.csdn.net/qq_45889379/article/details/130841742

版权

小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章描述了一个微信小程序中实现全选和单选功能的代码示例。通过WXML和JS交互，当所有子项被选中时显示全选状态，反之则显示未选中状态。点击全选按钮可以切换所有子项的选中状态，而单个子项的点击事件会更新其选中状态并影响全选的状态。

摘要由CSDN通过智能技术生成

当所有子项都选中时，显示选中状态，否则为不选中状态。未选中状态时点击操作，把所有子项都所中。选中状态点击操作，把所有子项都不选中。

先是wxml:

<radio value="0" checked="{{allchecked}}" bindtap="selectAll" color="#d81e06" />商品列表


<view class="car-list" wx:for="{{car_list}}" wx:key="index" wx:for-item="item">


<radio checked="{{item.selected}}" bindtap="selectList" data-index="{{index}}" color="#d81e06" />{{item.title}}


</view>

allchecked是控制全选的选中状态的变量，selectAll是全选的点击事件，selectlist是子项点击事件。

再是js代码：

data: {

    car_list: [],

    allchecked: false,

},


// 全选事件

  selectAll(e) {

    // 是否全选状态

    var selectAllStatus = this.data.allchecked;

    selectAllStatus = !selectAllStatus;

    var dataList = this.data.car_list;

    for (let i = 0; i < dataList .length; i++) {

      // 改变所有商品状态

      dataList [i].selected = selectAllStatus;

    }

    this.setData({

      allchecked: selectAllStatus,

      car_list: dataList,

    });

  },

// 选择事件

  selectList(e) {

    // 获取data- 传进来的index

    let index = e.currentTarget.dataset.index;

    // 获取购物车列表

    let dataArr = this.data.car_list;

    // 获取当前商品的选中状态

    let selected = dataArr[index].selected;

    // 改变状态

    dataArr[index].selected = !selected;

    this.setData({

      car_list: dataArr

    });



    // 改变全选状态

    for (var i = 0; i < this.data.car_list.length; i++) {

      // 当状态为全选时，每个元素其中有一个为false，则取消全选

      // 当状态为非全选时，每个元素都为true，则全选

      if (this.data.allchecked) {

        if (!this.data.car_list[i].selected) {

          this.setData({

            allchecked: false

          });

          break;

        }

      } else {

        if (this.data.car_list[i].selected) {

          this.setData({

            allchecked: true

          });

        } else {

          this.setData({

            allchecked: false

          });

          break;

        }

      }

    }

  },