微信小程序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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
innerText 使用示例
Jan 23 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
JavaScript仿京东轮播图效果
Feb 25 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中md5()函数的用法讲解
2019/03/30 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python struct模块解析
2014/06/12 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
django中cookiecutter的使用教程
2020/12/03 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
JAVA和C++的区别
2013/10/06 面试题
Javascript如何发送一个Ajax请求
2015/01/26 面试题
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
材料员岗位职责范本
2015/04/11 职场文书