微信小程序  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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
使用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
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
python中循环语句while用法实例
2015/05/16 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
如何使用python进行pdf文件分割
2019/11/11 Python
python实现宿舍管理系统
2019/11/22 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Django的CVB实例详解
2020/02/10 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
应届生自我鉴定
2013/12/11 职场文书
策划总监岗位职责
2014/02/16 职场文书
初中英语课后反思
2014/04/25 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
房屋租房协议书范本
2014/12/04 职场文书
趵突泉导游词
2015/02/03 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
小孩不笨观后感
2015/06/03 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
小学作文之描写天气
2019/08/15 职场文书