脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序checkbox组件

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

 更新时间：2018年01月31日 13:48:30   作者：Rattenking  
这篇文章主要介绍了微信小程序checkbox组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序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下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 微信小程序-消息提示框实例

    微信小程序-消息提示框实例

    本篇文章主要介绍了微信小程序-提示框，现在分享给大家，也给大家做个参考。感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • javascript设计模式之中介者模式Mediator

    javascript设计模式之中介者模式Mediator

    这篇文章主要介绍了javascript设计模式之中介者模式Mediator,需要的朋友可以参考下
    2014-12-12
  • asp javascript 实现关闭窗口时保存数据的办法

    asp javascript 实现关闭窗口时保存数据的办法

    asp javascript 实现关闭窗口时保存数据的办法...
    2007-11-11
  • 千万别错过的JavaScript sort方法使用指南

    千万别错过的JavaScript sort方法使用指南

    sort方法在我们的日常开发中是经常使用的，sort方法一般是用来对数组进行排序的，但是你是否知道sort方法默认是按什么方式排序的呢？下面就和我一起来深入了解sort方法吧
    2023-05-05
  • JavaScript创建对象的七种经典方式分享

    JavaScript创建对象的七种经典方式分享

    JavaScript 创建对象的方式有很多，通过 Object 构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。本文介绍了七种非常经典的创建对象的方式，希望对大家有所帮助
    2022-11-11
  • JavaScript 解决ajax中parsererror错误案例详解

    JavaScript 解决ajax中parsererror错误案例详解

    这篇文章主要介绍了JavaScript 解决ajax中parsererror错误案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • 原生JS实现留言板

    原生JS实现留言板

    这篇文章主要为大家详细介绍了原生JS实现留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS全局变量和局部变量最新解析

    JS全局变量和局部变量最新解析

    这篇文章主要介绍了JS全局变量和局部变量最新解析的相关知识，本文给给大家补充js删除局部变量的代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06
  • JavaScript中数组slice和splice的对比小结

    JavaScript中数组slice和splice的对比小结

    相信对很多学习JavaScript语言的人来说，都会经常搞不清slice和splice这两个方法。它们虽然名称相似，但是功能却完全不同。所以这篇文章就给大家详细整理了关于JavaScript中数组slice和splice的对比，有需要的可以参考学习。
    2016-09-09
  • js获取TreeView控件选中节点的Text和Value值的方法

    js获取TreeView控件选中节点的Text和Value值的方法

    在实际项目中，遇到一个问题，首先弹出一个新窗口，新窗口中放了一个TreeView控件，现在要解决的是，如何单击TreeView中一个节点，返回Text和Value到父页面并关闭该新窗口,本文将详细介绍此方法的实现
    2012-11-11

最新评论