微信小程序实现复选框效果


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序实现复选框片展示的具体代码,供大家参考,具体内容如下

样式部分你们自由发挥,反正这里是什么都没写的,选中和没选中直接用这个this.data.arrStatus[checkIndex]去判断就行了,之后你们都懂的。

效果预览:

微信小程序实现复选框效果

js部分

// page/index/index.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  items: [
   { name: 'USA', value: '美国' },
   { name: 'CHN', value: '中国' },
   { name: 'BRA', value: '巴西' },
   { name: 'JPN', value: '日本' },
   { name: 'ENG', value: '英国' },
   { name: 'TUR', value: '法国' },
  ],
  arr: [],
  arrStatus: []
 },

 check: function (e) {
  //获取当前选中的值
  var checkValue = e.currentTarget.dataset.val;
  //获取当前选中的下标
  var checkIndex = e.currentTarget.dataset.index;
  //当前选中的取反值
  this.data.arrStatus[checkIndex] = !this.data.arrStatus[checkIndex];
  if (this.data.arrStatus[checkIndex]) {
   //如果当前为选中状态则将值插入进数组中
   this.data.arr.push(checkValue);
  }else{
   //如果当前为未选中状态则将值从数组中删除并返回一个新的数组
   for (var i in this.data.arr) {
    if (this.data.arr[i] == checkValue) {
     this.data.arr.splice(i);
    }
   }
  }
  //打印当前所选中的数据
  console.log(this.data.arr);
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  //设置数组中每一个数据的状态
  for (var i in this.data.items) {
   this.data.arrStatus[i] = false;
  }
 },
})

wxml部分:

<block wx:for='{{ items }}'>
  <text data-index='{{ index }}' data-val='{{ item.value }}' catchtap='check'>{{ item.value }}</text>
</block>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 #Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
微信小程序实现日历效果
Dec 28 #Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python检索特定内容的文本文件实例
2018/06/05 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python cookie反爬处理的实现
2020/11/01 Python
python基于win32api实现键盘输入
2020/12/09 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
七一建党节演讲稿
2014/09/11 职场文书
上班迟到检讨书
2014/09/15 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
辛亥革命观后感
2015/06/02 职场文书
员工考勤管理制度
2015/08/06 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android