微信小程序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类式继承的具体实现方法
Dec 31 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
Angular脚手架开发的实现步骤
Apr 09 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
js实现录音上传功能
Nov 22 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
原生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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
十天学会php之第十天
2006/10/09 PHP
mysql 搜索之简单应用
2007/04/27 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
Firefox div高度自适应
2009/04/28 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
Vue 打包体积优化方案小结
2020/05/20 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
软件测试企业面试试卷
2016/07/13 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL