微信小程序 全选和取消全选

Posted 橘子king

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 全选和取消全选相关的知识,希望对你有一定的参考价值。

 

想要实现的效果:点击全选时,所有商品全部选中,图标为黑色选中状态,点击其中一个取消选中状态,全选按钮也随之为取消选中状态,当再次点击全选时,所有商品全部取消选中,如果分别把所有商品一个个选中,全选按钮会再次变为选中状态

js:

data: {
    define:true,
    total_num:"0",
    sc_object:[
      {
        sc_title:"嘻哈帮街舞",
        sc_imgsrc:"../../images/growup_img.png",
        sc_name:"嘻哈帮定制周年庆短袖",
        sc_detail:"红色-M号",
        sc_price:"188",
        sc_num:"1",
        sc_total:"188",
        state:0,
        editor_url:"../order_editor/order_editor"
       
      },
      {
        sc_title: "嘻哈帮街舞",
        sc_imgsrc: "../../images/growup_img.png",
        sc_name: "嘻哈帮定制周年庆短袖",
        sc_detail: "红色-M号",
        sc_price: "188",
        sc_num: "1",
        sc_total: "188",
        state: 0,
        editor_url: "../order_editor/order_editor"
      },
      {
        sc_title: "嘻哈帮街舞",
        sc_imgsrc: "../../images/growup_img.png",
        sc_name: "嘻哈帮定制周年庆短袖",
        sc_detail: "红色-M号",
        sc_price: "188",
        sc_num: "1",
        sc_total: "188",
        state: 0,
        editor_url: "../order_editor/order_editor"
      }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  select_add: function (e) {
    var index = e.currentTarget.dataset.index;
    var array = this.data.sc_object;
    if (array[index].state == 1) {
      array[index].state = 0;
    } else if (array[index].state == 0) {
      array[index].state = 1;
    }
    var num=0;
    var aa=0;
    for(var i=0;i<array.length;i++){
      var single_num = parseInt(array[i].sc_total);
      if(array[i].state==1){
        num=num+1;
        aa=aa+single_num
      }
      if (num ==array.length){
        this.setData({
          define:false
        })
      }else{
        this.setData({
          define:true
        })
      }
    }
    this.setData({
      sc_object: this.data.sc_object,
      total_num:aa
    });
  },
  switchTab1: function (e) {
    var that = this;
    let define = that.data.define;
    var num1=that.data.num1;
    define = !define;
    var array = that.data.sc_object;
    var aa=0;
    for(var i=0;i<array.length;i++){
      var nn = array[i].state;
      var single_num = parseInt(array[i].sc_total);
      if(define==true){
        array[i].state=0
      }else{
        array[i].state = 1
        aa = aa + single_num;
      } 
    }
    that.setData({
      define: define,
      sc_object: this.data.sc_object,
      total_num:aa
    })
  },

 

以上是关于微信小程序 全选和取消全选的主要内容,如果未能解决你的问题,请参考以下文章

react实现全选取消全选和个别选择

vue实现全选和取消全选

TreeView怎么实现复选框的全选和取消全选

vue全选和取消全选

JS做的全选和取消全选

JavaScript笔记--- DOM(续)(复选框的全选和取消全选;获取下拉列表选中项的value;网页时钟;内置支持类Array)