小程序的全选反选

最新推荐文章于 2022-02-11 10:30:18 发布

zzZjhz

最新推荐文章于 2022-02-11 10:30:18 发布

阅读量367

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_58824036/article/details/118631787

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述
全选

在这里插入图片描述

wxml

 <!-- 全选反选 -->
  <view style="display:flex">
    <checkbox value="全选" checked="{{seleAll}}" bind:tap="checkall"></checkbox>
    <text>全选</text>
    <view>
      <checkbox value="反选" checked="{{Invert}}" bind:tap="invertTap"></checkbox>
      <text>反选</text>
    </view>
  </view>
  <view wx:for="{{items}}" wx:key="*this">
    <checkbox value="{{item.text}}" data-id="{{index}}" checked="{{item.checked}}" bind:tap="checkedTap">
      {{item.text}}
    </checkbox>
  </view>

js

// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [
      { checked: false, text: "炸鸡", id: 1 },
      { checked: false, text: "可乐", id: 2 },
      { checked: false, text: "烧烤", id: 3 },
      { checked: false, text: "火锅", id: 4 },
    ],
    seleAll: false,
    Invert: false
  },

  //全选
  checkall() {
    let list = this.data.items;
    for (let i = 0; i < list.length; i++) {
      list[i].checked = !this.data.seleAll;
    }
    this.setData({
      seleAll: !this.data.seleAll,
      items: list
    })
  },
  //全部选中改变全选
  checkedTap(e) {
    let id = e.target.dataset.id;
    let list = this.data.items;
    let seleAll = this.data.seleAll;
    list[id].checked = !list[id].checked
    let len = list.filter(d => d.checked).length

    if (len == list.length) {
      seleAll = true
    } else {
      seleAll = false
    }
    this.setData({
      items: list,
      seleAll
    })
  },
  invertTap() {
    let items = this.data.items;
    let flag = true;
    let seleAll = this.data.seleAll;
    for (let i = 0; i < items.length; i++) {
      items[i].checked = !items[i].checked;
      if (items[i].checked) {
        seleAll = flag
      } else {
        flag = false
        seleAll = flag
      }
    }

    this.setData({
      items,
      seleAll: flag
    })
  },
})```