微信小程序  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 相关文章推荐
5种处理js跨域问题方法汇总
Dec 04 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
原生js实现购物车
Sep 23 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
php5.2.0内存管理改进
2007/01/22 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JTrackBar水平拖动效果
2007/07/15 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python 实现有道翻译功能
2021/02/26 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
高职教师岗位职责
2013/12/24 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
SpringBoot整合Minio文件存储
2022/04/03 Java/Android