微信小程序使用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 判断 enter 事件
Feb 12 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
如何更好的编写js async函数
May 13 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
react项目从新建到部署的实现示例
Feb 19 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 判断数组是几维数组
2013/03/20 PHP
基于php缓存的详解
2013/05/15 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
python获取目录下所有文件的方法
2015/06/01 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
wxPython实现文本框基础组件
2019/11/18 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
高一政治教学反思
2014/01/28 职场文书
技能比赛获奖感言
2014/02/14 职场文书
雷峰塔导游词
2015/02/09 职场文书
勇敢的心观后感
2015/06/09 职场文书
申请吧主发表的感言
2015/08/03 职场文书
采购部年度工作总结
2015/08/13 职场文书
商业计划书范文
2019/04/24 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python