微信小程序  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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
Javascript验证方法大全
Sep 21 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
基于PHP制作验证码
2016/10/12 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
关于js datetime的那点事
2011/11/15 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python装饰器decorator用法实例
2014/11/10 Python
python获取从命令行输入数字的方法
2015/04/29 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
你常见到的runtime exception
2016/09/05 面试题
异常和异常类的概念
2014/09/12 面试题
信息管理员岗位职责
2013/12/01 职场文书
上班早退检讨书
2014/01/09 职场文书
小学校长汇报材料
2014/08/20 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Django操作cookie的实现
2021/05/26 Python
MySQL存储过程及语法详解
2022/08/05 MySQL