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


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 相关文章推荐
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python range与enumerate函数区别解析
2020/02/28 Python
重构Python代码的六个实例
2020/11/25 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
晨会主持词
2014/03/17 职场文书
生日庆典策划方案
2014/06/02 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
老人院义工活动感想
2015/08/07 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
银行服务理念口号
2015/12/25 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
python垃圾回收机制原理分析
2022/04/13 Python