checkbox复选项组件说明:

checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择。

要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkbox-group标签。

checkbox-group标签的作用是可以为其中的checkbox标签绑定onchange事件,当用户做出选择的时候可以引导用户。

单独的checkbox标签不会触发onchange事件,只有在checkbox-group上绑定才会触发。

checkbox复选项组件示例代码运行效果如下:

下面是WXML代码:
[JavaScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
8
<view>
    <checkbox-group class="checkbox-group" bindchange="changed">
        <label class="items" wx:for="{{item}}">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>
            {{item.name}}
        </label>
    </checkbox-group>
</view>
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
Page({
  data:{
    item: [
      {'name': '俄罗斯', 'value': 'RS', 'disabled': false},
      {'name': '美国', 'value': 'US', 'disabled': false},
      {'name': '中国', 'value': 'CN', 'disabled': false, 'checked': true},
      {'name': '英国', 'value': 'UK', 'disabled': false},
      {'name': '日本', 'value': 'JP', 'disabled': true}
    ]
  },
  changed: function(e) {
    console.info('你选择了' + e.detail.value);
  }
})
        下面是WXSS代码:
[CSS] 纯文本查看 复制代码
1
2
3
4
.items {
    display: block;
    margin: 30rpx;
}
checkbox复选项的主要属性:
checkbox-group
属性名称
数据类型
描述
bindchange
EventHandle
<checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}
checkbox
属性名称
数据类型
描述
默认值
value
String
<checkbox/> 标识,选中时触发 <checkbox-group/> 的 change 事件,并携带 <checkbox/> 的value值
 
checked
Boolean
是否使 <checkbox/> 默认被选中
false
disabled
Boolean
是否使 <checkbox/> 被禁用
false

点击查看原文

微信小程序组件解读和分析:八、checkbox复选项的更多相关文章

  1. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  3. 微信小程序组件解读和分析:四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  4. 微信小程序组件解读和分析:十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  5. 微信小程序组件解读和分析:十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  6. 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

  7. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  8. 微信小程序组件解读和分析:十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

  9. 微信小程序组件解读和分析:十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

随机推荐

  1. 2 AngularJS 1 概念浓缩

    Angular Web APP 结构图: module   --> 模块     :相当于一个容器,Angular里的所有东西都得放在模块里,才能够被引用和加载. directive  --&g ...

  2. MySQL运行计划不准确 -概述

    为毛 MySQL优化器的运行计划 好多时候都不准确,不是最优的呢(cpu+io)??? 因素太多了:: 存在information_schema的信息是定期刷新上去的,好多时候不是最真的,甚至相差好大 ...

  3. 零基础学python-5.1 数字简单介绍

    1.创建数值对象并赋值 a=1#整数 b=1.1#浮点数 c=1.23e5#实数 d=1.23+4.56j#虚数 2.更新数值对象 注意:由于数值对象是不可变,所以与其说更新,还不如说把变量名从一个对 ...

  4. Vi/Vim查找替换使用方法【转】

    原文地址:http://wzgyantai.blogbus.com/logs/28117977.html vi/vim 中可以使用 :s 命令来替换字符串.该命令有很多种不同细节使用方法,可以实现复杂 ...

  5. [IT新应用]无线投影技术

    会议室内投影时,经常会有笔记本与投影仪之间因兼容性等无法切换的现象. 了解了下,无线投影方案的厂家大致如下: 1.http://www.taco.net.cn/ 2.巴可无线投影 https://ww ...

  6. 【java报错】CacheLoader returned null for key class

    CacheLoader returned null for key class cmd     mvn eclipse:clean eclipse:eclipse mvn install -Dmave ...

  7. stl之vector的应用

    这里主要是对vector容器的一些常见应用的总结.至于vector的构造函数及初始化能够參考http://blog.csdn.net/lsh_2013/article/details/21191289 ...

  8. android锁屏软件制作

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/mingyue_1128/article/details/33726515 转载请标明出处http:/ ...

  9. swift中的@objc的作用

    转载:https://www.jianshu.com/p/6c5b45d9d042 自动清除冗余代码减小包大小 得益于 Swift 的静态语言特性,每个函数的调用在编译期间就可以确定.因此在编译完成后 ...

  10. 注册中心Eureka页面添加用户认证

    我们需要登录即可访问到Eureka服务,这样其实是不安全的 为Eureka添加用户认证. 第一步,为itcast-microservice-eureka添加安全认证依赖: 第二步,增加applicat ...