微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

下面我将为你详细讲解“微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能”的完整攻略。

实现多选框全选与反全选

HTML结构

首先，在购物车页面的HTML结构中，给每一个商品前面加上一个多选框。例如：

<view class="cart-item">
  <checkbox class="checkbox" value="{{item.id}}" checked="{{item.selected}}"></checkbox>
  <!--其他商品信息-->
</view>

其中，item.selected表示该商品是否被选中，checkbox标签中value属性为商品的唯一标识符。

接着，在页面底部加上一个“全选”按钮，代码如下：

<view class="cart-footer">
  <checkbox class="checkbox-all" bindchange="selectAll" checked="{{allSelected}}"></checkbox>
  <text>全选</text>
</view>

其中，allSelected为页面的data属性，表示商品是否全部选中。

最后，在js文件中实现全选和反全选的功能：

selectAll: function(e) {
  var selected = e.detail.value;
  var items = this.data.cart;
  if (selected.length == 1) {
    //全选
    for (var i = 0; i < items.length; i++) {
      items[i].selected = true;
    }
  } else {
    //反选
    for (var i = 0; i < items.length; i++) {
      items[i].selected = !items[i].selected;
    }
  }
  //判断是否全部选中
  var allSelected = true;
  for (var i = 0; i < items.length; i++) {
    if (!items[i].selected) {
      allSelected = false;
      break;
    }
  }
  this.setData({
    cart: items,
    allSelected: allSelected
  })
},

当全选框被勾选时，将所有商品选中，反之则将所有商品反选。

示例说明1

假设原先选中的商品为：

[
  {id: 1, selected: true},
  {id: 2, selected: false},
  {id: 3, selected: true},
  {id: 4, selected: false}
]

当点击全选按钮时，执行全选操作，代码执行后变成：

[
  {id: 1, selected: true},
  {id: 2, selected: true},
  {id: 3, selected: true},
  {id: 4, selected: true}
]

当再次点击全选按钮时，执行反选操作，代码执行后变成：

[
  {id: 1, selected: false},
  {id: 2, selected: true},
  {id: 3, selected: false},
  {id: 4, selected: true}
]

实现购物车中删除选中的商品功能

HTML结构

在每一个商品之前，再加上一个删除按钮，用来删除选中的商品。

<view class="cart-item">
  <checkbox class="checkbox" value="{{item.id}}" checked="{{item.selected}}"></checkbox>
  <view class="cart-info">
    <!--商品信息-->
  </view>
  <view>
    <button class="delete" data-id="{{item.id}}" bindtap="deleteItem">删除</button>
  </view>
</view>

其中，data-id属性用来存储商品的唯一标识符。

js实现

在点击删除按钮的事件中，先判断商品是否被选中，如果选中，则将商品从购物车中删除。

deleteItem: function (e) {
  var id = e.currentTarget.dataset.id;
  var items = this.data.cart;
  for (var i = 0; i < items.length; i++) {
    if (items[i].id == id) {
      if (items[i].selected) { //判断是否被选中
        items.splice(i, 1);
        break;
      }
    }
  }
  //重新计算总价
  var total = 0;
  for (var i = 0; i < items.length; i++) {
    if (items[i].selected) {
      total += items[i].price * items[i].num;
    }
  }
  //判断是否全选
  var allSelected = true;
  for (var i = 0; i < items.length; i++) {
    if (!items[i].selected) {
      allSelected = false;
      break;
    }
  }
  //更新页面数据
  this.setData({
    cart: items,
    totalPrice: total.toFixed(2),
    allSelected: allSelected
  })
}

示例说明2

假设购物车中的商品与选中情况为：

[
  {id: 1, selected: true},
  {id: 2, selected: false},
  {id: 3, selected: true},
  {id: 4, selected: false}
]

当点击id为1的商品的删除按钮时，因为该商品被选中，因此会将该商品从购物车中删除。执行完成后结果为：

[
  {id: 2, selected: false},
  {id: 4, selected: false}
]

至此，“微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能”攻略完毕。