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'
  3. export default class PageCheckbox extends Component {
  4. state = {
  5. list: [
  6. {
  7. value: '美国',
  8. text: '美国',
  9. checked: false
  10. },
  11. {
  12. value: '中国',
  13. text: '中国',
  14. checked: true
  15. },
  16. {
  17. value: '巴西',
  18. text: '巴西',
  19. checked: false
  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. }
  38. render () {
  39. return (
  40. <View className='page-body'>
  41. <View className='page-section'>
  42. <Text>默认样式</Text>
  43. <Checkbox value='选中' checked>选中</Checkbox>
  44. <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
  45. </View>
  46. <View className='page-section'>
  47. <Text>推荐展示样式</Text>
  48. {this.state.list.map((item, i) => {
  49. return (
  50. <Label className='checkbox-list__label' for={i} key={i}>
  51. <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
  52. </Label>
  53. )
  54. })}
  55. </View>
  56. </View>
  57. )
  58. }
  59. }