微信小程序  checkbox组件详解及简单实例


Posted in Javascript onJanuary 10, 2017
 微信小程序表单组件 checkbox

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序  checkbox组件详解及简单实例

checkbox-group

多选项目组,内部由多个checkbox组成。

checkbox-group内只能包含checkbox

属性名 类型 默认值 说明
bindchange EventHandle   checkbox-group中选中项发生改变是触发change事件,detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性名 类型 默认值 说明
value String   checkbox标识,选中时触发checkbox-group的change事件,并携带checkbox的value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中,可用来设置默认选中

示例:

<checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for-items="{{items}}">
 <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>
Page({
 data: {
 items: [
 {name: 'USA', value: '美国'},
 {name: 'CHN', value: '中国', checked: 'true'},
 {name: 'BRA', value: '巴西'},
 {name: 'JPN', value: '日本'},
 {name: 'ENG', value: '英国'},
 {name: 'TUR', value: '法国'},
 ]
 },
 checkboxChange: function(e) {
 console.log('checkbox发生change事件,携带value值为:', e.detail.value)
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
react写一个select组件的实现代码
Apr 03 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
You might like
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python基于event实现线程间通信控制
2020/01/13 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
机关搬迁方案
2014/05/18 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL