微信小程序使用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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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/06/10 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
js实现车辆管理系统
2020/08/26 Javascript
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python 实时遍历日志文件
2016/04/12 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
详解numpy的argmax的具体使用
2019/05/27 Python
wxPython实现整点报时
2019/11/18 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
毕业论文评语大全
2014/04/29 职场文书
真诚的求职信
2014/07/04 职场文书
快递员岗位职责
2014/09/12 职场文书
故宫英文导游词
2015/01/31 职场文书
个人年底工作总结
2015/03/10 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
z-index不起作用
2021/03/31 HTML / CSS