CheckboxGroup
多项选择器，内部由多个 checkbox 组成。

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ √ onChange EventHandle 中选中项发生改变是触发 change 事件，detail = value:[选中的 Checkbox 的 value 的数组]
Checkbox
多选项目。

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ value String 标识，选中时触发的 change 事件，并携带 的 value
√ √ √ checked Boolean false 当前是否选中
√ √ √ disabled Boolean false 是否禁用
√ √ √ color Color checkbox 的颜色，同 css 的 color
x √ √ onChange EventHandle 选中项发生变化时触发 change 事件，小程序无此 API
示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text, Checkbox } from '@tarojs/components'
  4. export default class PageCheckbox extends Component {
  5.     constructor() {
  6.         super(...arguments)
  7.     }
  9.     state = {
  10.         list: [
  11.             {
  12.                 value: '美国',
  13.                 text: '美国',
  14.                 checked: false
  15.             },
  16.             {
  17.                 value: '中国',
  18.                 text: '中国',
  19.                 checked: true
  20.             },
  21.             {
  22.                 value: '巴西',
  23.                 text: '巴西',
  24.                 checked: false
  25.             },
  26.             {
  27.                 value: '日本',
  28.                 text: '日本',
  29.                 checked: false
  30.             },
  31.             {
  32.                 value: '英国',
  33.                 text: '英国',
  34.                 checked: false
  35.             },
  36.             {
  37.                 value: '法国',
  38.                 text: '法国',
  39.                 checked: false
  40.             }
  41.         ]
  42.     }
  43.     render() {
  44.         return (
  45.                 <View className="page-body">
  46.                     <View className="page-section">
  47.                             <Text>默认样式</Text>
  48.                             <Checkbox value="选中" checked>选中</Checkbox>
  49.                             <Checkbox style="margin-left: 20rpx" value="未选中">未选中</Checkbox>
  50.                     </View>
  51.                     <View className="page-section">
  52.                             <Text>推荐展示样式</Text>
  53.                             {this.state.list.map((item, i) => {
  54.                                     return (
  55.                                         <Label className="checkbox-list__label" for={i} key={i}>
  56.                                             <Checkbox className="checkbox-list__checkbox" value={item.value} checked={item.checked}>{item.text}</Checkbox>
  57.                                         </Label>
  58.                                     )
  59.                             })}
  60.                     </View>
  61.                 </View>
  62.         )
  63.     }
  64. }