微信小程序 全选和取消全选
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 }) },
以上是关于微信小程序 全选和取消全选的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript笔记--- DOM(续)(复选框的全选和取消全选;获取下拉列表选中项的value;网页时钟;内置支持类Array)