这篇文章主要为大家详细介绍了微信小程序实现复选框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

效果预览:


js部分

// page/index/index.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  items: [
   { name: 'USA', value: '美国' },
   { name: 'CHN', value: '中国' },
   { name: 'BRA', value: '巴西' },
   { name: 'JPN', value: '日(J)本(P)' },
   { 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 catchtap='check'>{{ item.value }}</text>
</block>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
Facebook为其平台加入免费云游戏功能

Facebook为其平台加入

Facebook发表博文称,并补充道所有基于云的流媒体游戏都
百度YY在一起? 一个不停买一个连续卖

百度YY在一起? 一个不

在百度与YY传出绯闻之前,百度早已通过投资布局直播,最具
“双11”前夕:快递网点承压企业疯狂圈地

“双11”前夕:快递网点

部分快递品牌的“蹭网”行为遭遇禁止,而龙头企业整合物
线下文娱演出复苏进行时:“演员+老师+直播”多元化开拓

线下文娱演出复苏进行

作者: 乐琰 陆瑶[ 第一财经记者近期调研和采访了大量文
字节跳动考虑部分业务 单独赴港上市

字节跳动考虑部分业务

10月26日,又有消息称字节跳动正考虑推动抖音业务单独在
上海的“新特产” 7000辆特斯拉驶向欧洲

上海的“新特产” 700

今年尽管受到了疫情的影响,但特斯拉上海超级工厂的建设
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,