微信小程序使用checkbox显示多项选择框功能【附源码下载】


Posted in Javascript onDecember 11, 2017

本文实例讲述了微信小程序使用checkbox显示多项选择框功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序使用checkbox显示多项选择框功能【附源码下载】

2、关键代码

① index.wxml

<checkbox-group bindchange="checkboxgroupBindchange">
 <checkbox value="checkbox1">checkbox1</checkbox>
 <checkbox value="checkbox2">checkbox2</checkbox>
 <checkbox value="checkbox3">checkbox3</checkbox>
</checkbox-group>
<view>提示:{{text}}</view>

② index.js

Page({
 data:{
  // text:"这是一个页面"
  text:''
 },
 checkboxgroupBindchange:function(e){
  var temp1=e.detail.value
  var temp2=''
  console.log(temp1)
  if(temp1.length!=0){
   for(var i=0,len=temp1.length;i<len;i++){
    temp2=temp2+temp1[i]+','
   }
   this.setData({
    text:'您选择了:'+temp2
   })
  }else{
   this.setData({
    text:''
   })
  }
 }
})

3、源代码点击此处本站下载

关于checkbox组件的详细用法说明还可参考官网:https://mp.weixin.qq.com/debug/wxadoc/dev/component/checkbox.html

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JS 修改URL参数(实现代码)
Jul 08 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
详解封装基础的angular4的request请求方法
Jun 05 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
js实现select下拉框选择
Jan 11 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 #Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 #Javascript
Mac中安装nvm的教程分享
Dec 11 #Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
基于dataset的使用和图片延时加载的实现方法
Dec 11 #Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 #Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
PHP函数常用用法小结
2010/02/08 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
浅析php单例模式
2014/11/25 PHP
php从字符串创建函数的方法
2015/03/16 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python+opencv实现车道线检测
2021/02/19 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
TCP/IP的分层模型
2013/10/27 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
个人求职信范文分享
2013/12/13 职场文书
中专生自荐信
2014/06/25 职场文书
委托书如何写
2014/08/30 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
话题作文之关于呼唤
2019/11/29 职场文书