效果图:

代码:

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. [SinGuLaRiTy] NOIP膜你赛-Day 1

    [SinGuLRiTy-1022] Copyright (c) SinGuLaRITy 2017. All Rights Reserved.  对于所有题目:Time Limit:1s || Memo ...

  2. TeamLeader管理方法

    1. 规划 在加强质量的同时,提升团队业务理解能力推动产品经理深入度增加业务监控 2. 洗脑 现在离开去bat,前两年会学习,但可能无人带领待3-5年,做到B类从基金学习起,学习金融学习架构设计提升团 ...

  3. 【图灵学院10】高并发之java线程池源码分析

    1. 提纲 1)线程池的模块结构 2)示例&原理解析 2. 问题 1)线程池包含哪些东西 2)线程池的运作原理 3)调度线程池的运作原理 4)线程池怎么实现FixRate,FixDelay,他 ...

  4. 「十二省联考 2019」皮配——dp

    题目 [题目描述] #### 题目背景一年一度的综艺节目<中国好码农>又开始了.本季度,好码农由 Yazid.Zayid.小 R.大 R 四位梦想导师坐镇,他们都将组建自己的梦想战队,并率 ...

  5. Canvas 与 Image 相互转换

    转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法: 代码如下: // 把image 转换为 canvas对 ...

  6. [HAOI2012]音量调节 BZOJ2748 dp

    题目描述 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都需要改变一次音量.在演出开始之前,他已经做好一个列表,里面写着每首歌开始之前他想要改变的音量是多少. ...

  7. 2018-2019-2 20165320 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165320 <网络对抗技术> Exp6 信息搜集与漏洞扫描 一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧应用 ...

  8. SQL Server中,varchar和nvarchar如何选择

    正常情况下,我们使用varchar也可以存储中文字符,但是如果遇到操作系统是英文操作系统并且对中文字体的支持不全面时, 在SQL Server存储中文字符为varchar就会出现乱码(显示为??). ...

  9. Codeforces Round #305 (Div. 2) A

    Description While Mike was walking in the subway, all the stuff in his back-bag dropped on the groun ...

  10. 查询mysql单库的修改时间,大小

      select database_name,max(last_update) from mysql.innodb_table_stats group by database_name;   SELE ...