效果图:

代码:

wxml

 <view class='hei_top'>
<view class='hei_p'>共
<text>4</text> 场</view>
<view class='hei_ps' bindtap='selectAll'>
<image data-statue="selectilall" src="{{selectilall?'/images/true_p@2x.png':'/images/true_n@2x.png'}}"></image>
<text>全选</text>
</view>
</view>
<view class='boo' wx:for="{{list}}">
<view class='boo_top'>明日11:00</view>
<view class='boo_li'>
<view class='boo_img1'>
<text class='raankstyle'>{{item.id}}</text>
</view>
<view class='boo_img2'>
<image src='/images/footballeasyicon@2x.png'></image>
</view>
<view class='boo_text'>活塞</view>
<view class='boo_text1'>@</view>
<view class='boo_text'>掘金</view>
<view class='boo_img2'>
<image src='/images/footballeasyicon@2x.png'></image>
</view>
<view class='boo_img3' data-index="{{index}}" data-name="{{item.id}}" bindtap='select'>
<image data-id='0' src="{{item.checked==true?'/images/true_p@2x.png':'/images/true_n@2x.png'}}"></image>
</view>
</view>
</view>

.js

data: {
list: [
{ id: , name: , checked: false },
{ id: , name: , checked: false },
{ id: , name: , checked: false },
{ id: , name: , checked: false },
],
selectilall:false
},
//单选
select: function (e) {
let selectValue = e.currentTarget.dataset.name
let index = e.currentTarget.dataset.index;
let list = this.data.list
let newli = 'list[' + index + '].checked';
this.setData({
[newli]: !this.data.list[index].checked
})
//let li2 = this.data.list[index].checked
//if (li2 == false) {
// for (let i in this.data.select) {
// if (this.data.select[i] == selectValue) {
//this.data.select.splice(i, 1);
//}
// }
//} else {
//this.data.select.push(selectValue);
//}
console.log(this.data.select)
},
//全选,取消全选
selectAll: function (e) {
let list = this.data.list;
let selectilall = this.data.selectilall;
if (selectilall==false){
for (let i = 0; i < list.length; i++) {
let newli = 'list[' + i + '].checked';
//carts[i].selected = this.data.selectedAllStatus;
//this.data.select.push(this.data.list[i].id);
this.setData({
//[newli]: !this.data.list[i].checked
[newli]: true,
selectilall: true
})
}
}else{
for (let i = 0; i < list.length; i++) {
let newli = 'list[' + i + '].checked';
//carts[i].selected = this.data.selectedAllStatus;
//this.data.select.push(this.data.list[i].id);
this.setData({
//[newli]: !this.data.list[i].checked
[newli]: false,
selectilall: false
})
}
} console.log(list);
},

微信小程序全选多选效果的更多相关文章

  1. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  2. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  3. 微信小程序全选,微信小程序checkbox,微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  4. 微信小程序实现“鲜肉APP”首页效果

    项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star 由于微信小程序目前是当下趋势,正好昨天弄 ...

  5. 微信小程序实现左滑删除效果(原生/uni-app)

    实现效果 列表中侧滑删除 删除不同时存在 scrollview上下滑动与侧滑删除不影响 uni-app实现 html部分 <template> <scroll-view :scrol ...

  6. 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)

    (一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...

  7. 微信小程序组件 自定义多选

    <view class='back'></view> <view class="container"> <!-- 睡眠记录 --> ...

  8. 微信小程序播放视频发送弹幕效果

    首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...

  9. 微信小程序通讯录首字母索引效果,车辆品牌选择列表

    效果图: wxml代码: <block wx:for="{{list}}"> <view class='letter' id="letter{{inde ...

随机推荐

  1. mysql服务启动不了解决方法

    sudo lsof |grep deleted  找占用大的kill一下,  一般是tomcat log和zookeeper的out比较吃磁盘 du -h --max-depth=1 / 今天作死,想 ...

  2. day03-Linux操作系统目录结构

    一. Linux系统目录表示        ‘/’表示根目录:                                                            ‘.’表示当前目录 ...

  3. [SinGuLaRiTy] 贪心题目复习

    [SinGuLaRiTy-1024] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. [POJ 2709] 颜料 (Painter) 题目描述 ...

  4. Google Maglev 牛逼的网络负载均衡器(转)

    https://segmentfault.com/a/1190000009565788 Maglev 是什么 Maglev 是谷歌搞的一个工作在三层(IP层)的网络负载均衡器, 它是一个运行在普通的 ...

  5. ORACLE 中dbms_stats的使用

    dbms_stats能良好地估计统计数据(尤其是针对较大的分区表),并能获得更好的统计结果,最终制定出速度更快的SQL执行计划. exec dbms_stats.gather_schema_stats ...

  6. 缩点【洛谷P1262】 间谍网络

    [洛谷P1262] 间谍网络 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他 ...

  7. Linq中的group by多表多字段,Sum求和

    //Line to Sql 写法 var data = (from a in Items group a by new { a.GroupId, a.Id } into b //orderby new ...

  8. centos7上面关闭防火墙

    CentOS 7.0默认使用的是firewall作为防火墙:若没有启用iptables 作为防火墙,则使用以下方式关闭防火墙: systemctl stop firewalld.service 关闭开 ...

  9. Qt 学习之路 2(11):布局管理器

    Home / Qt 学习之路 2 / Qt 学习之路 2(11):布局管理器 Qt 学习之路 2(11):布局管理器  豆子  2012年9月4日  Qt 学习之路 2  70条评论 所谓 GUI 界 ...

  10. 第一册:lesson 125.

    原文: Tea for two. question:Does Susan have tea by herself? Can't you come in and have tea now Piter? ...