title: CheckboxGroup

sidebar_label: CheckboxGroup

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

支持情况:CheckboxGroup - 图1 CheckboxGroup - 图2 CheckboxGroup - 图3 CheckboxGroup - 图4

参考文档

类型

  1. ComponentType<CheckboxGroupProps>

示例代码

  1. export default class PageCheckbox extends Component {
  2. state = {
  3. list: [
  4. {
  5. value: '美国',
  6. text: '美国',
  7. checked: false
  8. },
  9. {
  10. value: '中国',
  11. text: '中国',
  12. checked: true
  13. },
  14. {
  15. value: '巴西',
  16. text: '巴西',
  17. checked: false
  18. },
  19. {
  20. value: '日本',
  21. text: '日本',
  22. checked: false
  23. },
  24. {
  25. value: '英国',
  26. text: '英国',
  27. checked: false
  28. },
  29. {
  30. value: '法国',
  31. text: '法国',
  32. checked: false
  33. }
  34. ]
  35. }
  36. render () {
  37. return (
  38. <View className='page-body'>
  39. <View className='page-section'>
  40. <Text>默认样式</Text>
  41. <Checkbox value='选中' checked>选中</Checkbox>
  42. <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
  43. </View>
  44. <View className='page-section'>
  45. <Text>推荐展示样式</Text>
  46. {this.state.list.map((item, i) => {
  47. return (
  48. <Label className='checkbox-list__label' for={i} key={i}>
  49. <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
  50. </Label>
  51. )
  52. })}
  53. </View>
  54. </View>
  55. )
  56. }
  57. }

CheckboxGroupProps

参数 类型 必填 说明
name string 表单组件中加上 name 来作为 key
onChange CommonEventFunction<{ value: string[]; }> <CheckboxGroup/> 中选中项发生改变是触发 change 事件

event.detail = { value: [选中的checkbox的 value 的数组] }

API 支持度

API 微信小程序 H5 React Native Harmony
CheckboxGroupProps.name ✔️
CheckboxGroupProps.onChange ✔️ ✔️ ✔️