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. [更新Github地址]python学习,自己写了个简单聊天工具mychat

    最近在学习python,自己写了个最最简单的聊天工具mychatv0.1. 第一版,完成基本的聊天功能. GUI用的是自带的TKinter,用到的模块主要就是socket(网络编程), thread( ...

  2. ZFIND_EXIT_BADI

    *&---------------------------------------------------------------------* *& Report  ZFIND_EX ...

  3. uboot中关于LCD的代码分析【转】

    本文转载自:http://blog.csdn.net/oqqHuTu12345678/article/details/72236117 以下内容源于朱有鹏<物联网大讲坛>课程的学习,如有侵 ...

  4. What's the difference between HEAD, working tree and index, in Git?

    What's the difference between HEAD, working tree and index, in Git?

  5. YTU 2911: 我想放假

    2911: 我想放假 时间限制: 1 Sec  内存限制: 128 MB 提交: 124  解决: 46 题目描述 小明的弟弟上小学了,每次刚入学就想知道什么时候放假,但是每学期开学的日子和每学期的有 ...

  6. 我的第一篇博文,Python+scrapy框架安装。

    自己用Python脚本写爬虫有一段时日了,也抓了不少网页,有的网页信息两多,一个脚本用exe跑了两个多月,数据还在进行中.但是总觉得这样抓效率有点低,问题也是多多的,很早就知道了这个框架好用,今天终于 ...

  7. memcached value最大限制只能是1M吗

    关于memcached的value最大是1M的限制很多人都知道,但是如果你以为我还要说这个事情,那你就错了. 之前的老版本确实是只能是1M,但是根据git记录,其实2009年以后的版本这个value最 ...

  8. Consistent Hashing算法

    前几天看了一下Memcached,看到Memcached的分布式算法时,知道了一种Consistent Hashing的哈希算法,上网搜了一下,大致了解了一下这个算法,做下记录. 数据均衡分布技术在分 ...

  9. Bootstrap指定表格字段宽度

    默认情况下,表格会占据屏幕所有宽度,可以使用bootstrap的布局功能.但表格标题字段的宽度必须与相应字段内容的宽度一致. <div class="container"&g ...

  10. 将Mozilla ThunderBird最小化到系统托盘(转载)

    转自:http://be-evil.org/mozilla-thunderbird-minize-to-tray.html Mozilla ThunderBird是一款非常不错的邮件客户端,但是其在默 ...