微信小程序  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帮助之筛选查找 children([expr])
Jan 31 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
微信小程序实现首页弹出广告
Dec 03 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
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php实用代码片段整理
2016/11/12 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
python实现视频分帧效果
2019/05/31 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
2014庆六一活动方案
2014/03/02 职场文书
小学端午节活动方案
2014/03/13 职场文书
大学学习计划书范文
2014/05/02 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
大学生党性分析材料
2014/12/19 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
工作感想范文
2015/08/07 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
mysql 带多个条件的查询方式
2021/06/05 MySQL