如何设置复选框组CheckboxGroup_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

复选框组合，内部由多个 CheckboxItem 组成。

重要

复选框组内部子元素，必须配合 CheckboxGroup 使用，有单独使用需求的请使用 Checkbox。
CheckboxGroup 组件与 CheckboxItem 组件必须有相同的 uid，且 uid 全局唯一。
当作为表单组件，配合 Form/FormItem组件使用时，需要设置 CheckboxGroup 组件的 mode
的值为 form。

属性

CheckboxGroup

属性	说明	类型	默认值
value	CheckboxGroup 的值，决定是否勾选子元素	string[]	[]
radius	是否带圆角	boolean	false
position	布局	'horizontal' \| 'vertical'	'vertical'
uid	当页面有多个 CheckboxGroup 时需传入 uid，且必须页面唯一，与内部的 CheckboxItem 组件的 uid 保持一致	string	-
header	头部说明	string	-
footer	底部说明	string	-
disabled	是否禁用	boolean	false
mode	模式	'normal' \| 'form'	'normal'
className	类名	string	-

CheckboxItem

属性	说明	类型	默认值
checked	是否选中	boolean	false
disabled	是否禁用	boolean	false
color	checkbox 的颜色，同 CSS 色值	string	-
value	checkbox 携带的 value 值，在原生 form 表单提交时或使用 CheckboxGroup 时使用	string	-
icon	自定义未选中图标，支持 Icon 和图片路径	string	-
checkedIcon	自定义选中状态的图标，支持 Icon 和图片路径	string	-
disabledIcon	自定义禁用状态的图标，支持 Icon 和图片路径	string	-
disabledCheckedIcon	自定义禁用选中状态的图标，支持 Icon 和图片路径	string	-
uid	当页面有多个 CheckboxGroup 时需传入，必须页面唯一，与外部的 CheckboxGroup 组件的 uid 一致	string	-
id	表单元素 id	string	-
name	表单元素 name	string	-
className	类名	string	-

事件

事件名	说明	类型
onChange	勾选状态变化时，触发此函数	`(value) => {}`

插槽

名称	说明
header	头部内容插槽
footer	底部内容插槽

样式类

类名	说明
amd-checkbox-group	整体样式
amd-list-header	头部内容样式
amd-list-body	内部内容样式
amd-list-footer	底部内容样式

类名	说明
amd-checkbox-item	整体样式
amd-checkbox	原始 checkbox 整体样式
amd-checkbox-base	原始 checkbox 样式
amd-checkbox-fake	未选中 checkbox 样式
amd-checkbox-checked	选中 checkbox 样式

代码示例

基本使用

index.axml 的代码示例如下：

<demo-block title="基础用法">
  <checkbox-group 
    uid="group1"
    onChange="handleChange"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      uid="group1">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>


<demo-block title="横向布局">
  <checkbox-group 
    uid="group4"
    position="horizontal"
    onChange="handleChange"
  >
  <checkbox-item 
    a:for="{{list}}"
    value="{{item.value}}"  
    uid="group4">
      {{item.label}}
  </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="部分禁用">
  <checkbox-group 
    uid="group2"
    value="{{['orange','banner']}}"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      disabled="{{index===1}}"
      uid="group2">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="整组禁用">
  <checkbox-group 
    uid="group3"
    value="{{['orange','banner']}}"
    disabled="{{true}}">

    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      uid="group3">
        {{item.label}}
    </checkbox-item>
  </checkbox-group>
</demo-block>

<demo-block title="自定义图标">
  <checkbox-group 
    uid="group5"
    onChange="handleChange"
  >
    <checkbox-item 
      a:for="{{list}}"
      value="{{item.value}}"  
      icon="SmileOutline" checkedIcon="SmileFill"
      uid="group5">
        {{item.label}}
    </checkbox-item>

  </checkbox-group>
</demo-block>

index.js 的代码示例如下：

Page({
  data: {
    value: ['orange'],
    list: [
      { value: 'apple', label: '苹果' },
      { value: 'orange', label: '橘子' },
      { value: 'banana', label: '香蕉' },
    ],
  },

  handleChange(value) {
    console.log('onChange', value);
  },
});

index.acss 的代码示例如下：

.btns {
  display: flex;
  padding: 0 24rpx 24rpx;
  justify-content: space-between;
}

.btns button {
  flex: 1;
  margin-right: 12rpx;
}

.btns button~button {
  margin-right: 0;
  margin-left: 12rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "CheckBoxGroup",
  "usingComponents": {
    "demo-block": "../../components/DemoBlock/index",
    "checkbox-group": "antd-mini/es/CheckboxGroup/index",
    "checkbox-item": "antd-mini/es/CheckboxGroup/CheckboxItem/index"
  }
}