微信小程序  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 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
js中作用域的实例解析
Mar 16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python continue语句用法实例
2014/03/11 Python
Python读写配置文件的方法
2015/06/03 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
群众路线问题查摆对照检查材料
2014/10/04 职场文书
干部考核工作总结
2015/08/12 职场文书
教师听课学习心得体会
2016/01/15 职场文书
心理学培训心得体会
2016/01/22 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js