# CheckBox 多选框

# 介绍

一组备选项中进行多选。

# 引入

"usingComponents": {
  "m-checkbox-group": "mind-ui-weapp/checkbox-group/index",
  "m-checkbox": "mind-ui-weapp/checkbox/index"
}

# 示例

# 基础用法

<m-checkbox value="{{ checked }}">复选框</m-checkbox>

# 圆形

<m-checkbox value="{{ checked }}" round>复选框</m-checkbox>

# 自定义颜色

<m-checkbox value="{{ checked }}" checked-color="red">复选框</m-checkbox>

# 禁用

<m-checkbox value="{{ checked }}" disabled>复选框</m-checkbox>

# label 居左

<m-checkbox label-left value="{{ checked }}">复选框</m-checkbox>

# 组示例

<m-checkbox-group value="{{ checkedList }}" bind:change="checkGroupChange">
  <m-checkbox name="a">复选框a</m-checkbox>
  <m-checkbox name="b">复选框b</m-checkbox>
  <m-checkbox name="c">复选框c</m-checkbox>
  <m-checkbox name="d">复选框d</m-checkbox>
</m-checkbox-group>

Page({
  data: {
    checked: false,
    checkedList: ['a', 'b']
  },

  checkGroupChange({ detail }) {
    this.setData({ 
      checkedList: detail 
    })
  }
})

# 限制选择个数

<m-checkbox-group value="{{ checkedList }}" max="{{ 2 }}" bind:change="checkGroupChange">
  <m-checkbox name="a">复选框a</m-checkbox>
  <m-checkbox name="b" disabled>复选框b</m-checkbox>
  <m-checkbox name="c">复选框c</m-checkbox>
  <m-checkbox name="d">复选框d</m-checkbox>
</m-checkbox-group>

Page({
  data: {
    checkedList: ['a', 'b']
  },

  checkGroupChange({ detail }) {
    this.setData({ 
      checkedList: detail 
    })
  }
})

# Api

# Checkbox Group Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String — —
checked-color 选中状态颜色 String — —
value 选中项 name 集合 Array — —
disabled 是否禁用 Boolean — false
name 在表单内提交时的标识符 String — —
label-left 文字在左边 Boolean — false
round 是否圆形 Boolean — false

# Group Events

方法名称 说明 值
bind:change 选中值变更时触发回调 event.detail 当前选中项 name

# Checkbox Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String — —
checked-color 选中状态颜色，优先级高于 group String — —
value 是否选中 Boolean — false
name 在表单内提交时的标识符 String — —
disabled 是否禁用 Boolean — false
label-left 文字在左边 Boolean — false
round 是否圆形 Boolean — false

# Checkbox Events

方法名称 说明 值
bind:change 选中值变更时触发回调 event.detail 当前 checked 状态值

# Slot

名称 说明
— label 内容

← Rate 评分 →