效果图:

代码:

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. [hdu 2089] 不要62 数位dp|dfs 入门

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意:求[n, m]区间内不含4和62的数字个数. 这题有两种思路,直接数位dp和dfs 数位d ...

  2. loj #547. 「LibreOJ β Round #7」匹配字符串

    #547. 「LibreOJ β Round #7」匹配字符串   题目描述 对于一个 01 串(即由字符 0 和 1 组成的字符串)sss,我们称 sss 合法,当且仅当串 sss 的任意一个长度为 ...

  3. 洛谷P3724 [AH2017/HNOI2017]大佬(决策单调性)

    传送门 这个思路很妙诶->这里 以下为了方便,我把自信说成血量好了 虽然表面上看起来每一天有很多种选择,然而我们首先要保证的是不死,然后考虑不死的情况下最多能拿出多少天来进行其他操作.不死可以d ...

  4. Python列表知识补充

    1.import this  Python之禅,圣经. >>> import this The Zen of Python, by Tim Peters Beautiful is b ...

  5. js中的DOM对象 和 jQuery对象 比较

    一,二者的区别 通过 jQuery 获取的元素是一个数组,数组中包含着原生JS中的DOM对象. 总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法. 二,二者的相互 ...

  6. P1556 幸福的路

    题意:平面内有N头牛$N\le 10$john从(0,0)出发,最后回到(0,0) 只有走到牛那里john才可以改变方向,否则沿着直线走 问john经过每一头牛并且在每一头牛出恰好改变方向一次的方案( ...

  7. Leetcode 520. Detect Capital 发现大写词 (字符串)

    Leetcode 520. Detect Capital 发现大写词 (字符串) 题目描述 已知一个单词,你需要给出它是否为"大写词" 我们定义的"大写词"有下 ...

  8. Hadoop源码分析之产生InputSplit文件过程

        用户提交 MapReduce 作业后,JobClient 会调用 InputFormat 的 getSplit方法 生成 InputSplit 的信息.     一个 MapReduce 任务 ...

  9. Java快速IO(ACM)必备

    en.... 无非用到的是 1. new Scanner(System.in); 2.new BUfferReader(new InputStreamReader(System.in); 3.Syst ...

  10. nginx FastCGI模块配置

    这个模块允许nginx同FastCGI协同工作,并且控制哪些参数将被安全传递. location / { fastcgi_pass localhost:9000;# 或者http://ip:9000; ...