如何使用checkbox组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍多项选择器（checkbox）。

checkbox-group

多项选择器组。

属性名	类型	默认值	描述	最低版本
name	String	-	组件名字，用于表单提交获取数据。	-
onChange	EventHandle	-	选中项发生改变时触发。 `detail = {value: 选中的 checkbox 项 value 的值}`	-

checkbox

多选项目。

属性名	类型	默认值	描述	最低版本
value	String	-	组件值，选中时 change 事件会携带的 value 。	-
checked	Boolean	false	当前是否选中，可用来设置默认选中。	-
disabled	Boolean	false	是否禁用。	-
onChange	EventHandle	-	组件发生改变时触发。 `detail = {value: 该 checkbox 是否 checked}` 。	-
color	Color	-	checkbox 的颜色。	1.10.0

图示

代码示例

// acss
.checkbox {
  display: block;
  margin-bottom: 20rpx;
}
.checkbox-text {
  font-size:34rpx;
  line-height: 1.2;
}

<checkbox-group onChange="onChange">
  <label class="checkbox" a:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
    <text class="checkbox-text">{{item.value}}</text>
  </label>
</checkbox-group>

Page({
  data: {
    items: [
      {name: 'angular', value: 'AngularJS'},
      {name: 'react', value: 'React', checked: true},
      {name: 'polymer', value: 'Polymer'},
      {name: 'vue', value: 'Vue.js'},
      {name: 'ember', value: 'Ember.js'},
      {name: 'backbone', value: 'Backbone.js', disabled: true},
    ],
  },
  onChange(e) {
    my.alert({
      title: `你选择的框架是 ${e.detail.value}`,
    });
  },
});