title: CheckboxGroup

sidebar_label: CheckboxGroup

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

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ √ name String 表单组件中加上 name 来作为 key
√ √ √ 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.   state = {
  6.     list: [
  7.       {
  8.         value: '美国',
  9.         text: '美国',
  10.         checked: false
  11.       },
  12.       {
  13.         value: '中国',
  14.         text: '中国',
  15.         checked: true
  16.       },
  17.       {
  18.         value: '巴西',
  19.         text: '巴西',
  20.         checked: false
  21.       },
  22.       {
  23.         value: '日本',
  24.         text: '日本',
  25.         checked: false
  26.       },
  27.       {
  28.         value: '英国',
  29.         text: '英国',
  30.         checked: false
  31.       },
  32.       {
  33.         value: '法国',
  34.         text: '法国',
  35.         checked: false
  36.       }
  37.     ]
  38.   }
  39.   render () {
  40.     return (
  41.       <View className='page-body'>
  42.         <View className='page-section'>
  43.           <Text>默认样式</Text>
  44.           <Checkbox value='选中' checked>选中</Checkbox>
  45.           <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
  46.         </View>
  47.         <View className='page-section'>
  48.           <Text>推荐展示样式</Text>
  49.           {this.state.list.map((item, i) => {
  50.             return (
  51.               <Label className='checkbox-list__label' for={i} key={i}>
  52.                 <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
  53.               </Label>
  54.             )
  55.           })}
  56.         </View>
  57.       </View>
  58.     )
  59.   }
  60. }