微信小程序使用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打开新窗口同时关闭旧窗口
Jan 16 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue interceptor 使用教程实例详解
Sep 13 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
vue制作抓娃娃机的示例代码
Apr 17 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自动注册登录验证机制实现代码
2011/12/20 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
免费空间广告万能消除代码
2006/09/04 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
师范生自荐信范文
2013/10/06 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
驻村工作简报
2015/07/20 职场文书
Python实现拼音转换
2021/06/07 Python
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python