微信小程序使用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 相关文章推荐
网上抓的一个特效
May 11 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
浅谈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中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP自定义错误用法示例
2016/09/28 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
python 实现矩阵填充0的例子
2019/11/29 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
联想C++笔试题
2012/06/13 面试题
explicit和implicit的含义
2012/11/15 面试题
实习评语大全
2014/04/26 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
background-position百分比原理详解
2021/05/08 HTML / CSS
nginx+lua单机上万并发的实现
2021/05/31 Servers
Vue深入理解插槽slot的使用
2022/08/05 Vue.js