微信小程序使用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 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
js css样式操作代码(批量操作)
Oct 09 Javascript
js 文件引入实现代码
Apr 23 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js的延迟执行问题分析
Jun 23 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 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后退一页表单内容保存实现方法
2012/06/17 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python素数筛选法浅析
2018/03/19 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python实现超级马里奥
2020/03/18 Python
python开发前景如何
2020/06/11 Python
浅析Python中字符串的intern机制
2020/10/03 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
家长学校实施方案
2014/03/15 职场文书
老公保证书范文
2014/04/29 职场文书
城管大队整治方案
2014/05/06 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015暑假假期总结
2015/07/13 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js
从原生JavaScript到React深入理解
2022/07/23 Javascript