微信小程序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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
JS验证不重复验证码
Feb 10 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
js实现图片无缝循环轮播
Oct 28 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
Python 初始化多维数组代码
2008/09/06 Python
django之常用命令详解
2016/06/30 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
简单了解python模块概念
2018/01/11 Python
python简单验证码识别的实现方法
2019/05/10 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
留学生如何写好自荐信
2013/12/27 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
初婚未育证明样本
2015/06/18 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电