微信小程序checkbox组件使用详解


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序checkbox组件的使用方法,供大家参考,具体内容如下

效果图

微信小程序checkbox组件使用详解

WXML

<view class="tui-content">
 <checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for="{{items}}">
  <view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
 </label>
 </checkbox-group>
 <view class="tui-show-name">
 <text wx:for="{{checkArr}}"> {{item}} </text>
 </view>
</view>

JS

Page({
 data: {
 items: [
  { name: 'USA', value: '美国' },
  { name: 'CHN', value: '中国', checked: 'true' },
  { name: 'BRA', value: '巴西' },
  { name: 'JPN', value: '日本' },
  { name: 'ENG', value: '英国' },
  { name: 'TUR', value: '法国' },
 ],
 checkArr: ['中国']
 },
 checkboxChange: function (e) {
 var arr = [];
 e.detail.value.forEach(current => {
  for (var value of this.data.items){
  if(current === value.name){
   arr.push(value.value);
   break;
  } 
  }
 });
 this.setData({checkArr: arr});
 }
})

总结

  • 由于e.detail.value和this.data.items都是数组元素进行属性对比查找,所以此处采用了双循环。
  • forEach循环不能在循环中跳出,所以在循环this.data.items时采用for…of…

DEMO下载

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

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue实现记事本功能
Jun 26 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 #Javascript
微信小程序switch开关选择器使用详解
Jan 31 #Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 #Javascript
微信小程序slider组件使用详解
Jan 31 #Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 #Javascript
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
如何使用php输出时间格式
2013/08/31 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python入门教程之识别验证码
2017/03/04 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python实现梯度下降算法
2020/03/24 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
个人简历自我鉴定
2013/10/11 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
考研导师推荐信范文
2015/03/27 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
python使用torch随机初始化参数
2022/03/22 Python
SpringBoot详解执行过程
2022/07/15 Java/Android