1# CheckboxGroup 2 3多选框群组，用于控制多选框全选或者不全选状态。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15CheckboxGroup(options?: { group?: string }) 16 17创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。 18 19**参数:** 20 21 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| group | string | 否 | 群组名称。| 26 27## 属性 28 29除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 30 31| 名称 | 参数类型 | 描述 | 32| -------- | -------- | -------- | 33| selectAll | boolean | 设置是否全选。<br/>默认值：false | 34| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置被选中或部分选中状态的颜色。 | 35 36## 事件 37 38除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 39 40| 名称 | 功能描述 | 41| -------- | -------- | 42| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult对象说明)) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。| 43 44## CheckboxGroupResult对象说明 45| 名称 | 类型 | 描述 | 46| ------ | ------ | ------- | 47| name | Array<string> | 群组内所有被选中的多选框名称。 | 48| status | [SelectStatus](#selectstatus枚举说明) | 选中状态。 | 49 50## SelectStatus枚举说明 51 52| 名称 | 描述 | 53| ----- | -------------------- | 54| All | 群组多选择框全部选择。 | 55| Part | 群组多选择框部分选择。 | 56| None | 群组多选择框全部没有选择。 | 57 58 59## 示例 60 61```ts 62// xxx.ets 63@Entry 64@Component 65struct CheckboxExample { 66 build() { 67 Scroll() { 68 Column() { 69 // 全选按钮 70 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 71 CheckboxGroup({ group: 'checkboxGroup' }) 72 .selectedColor(0xed6f21) 73 .onChange((itemName: CheckboxGroupResult) => { 74 console.info("checkbox group content" + JSON.stringify(itemName)) 75 }) 76 Text('Select All').fontSize(20) 77 } 78 79 // 选项1 80 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 81 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 82 .selectedColor(0x39a2db) 83 .onChange((value: boolean) => { 84 console.info('Checkbox1 change is' + value) 85 }) 86 Text('Checkbox1').fontSize(20) 87 } 88 89 // 选项2 90 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 91 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 92 .selectedColor(0x39a2db) 93 .onChange((value: boolean) => { 94 console.info('Checkbox2 change is' + value) 95 }) 96 Text('Checkbox2').fontSize(20) 97 } 98 99 // 选项3 100 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 101 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 102 .selectedColor(0x39a2db) 103 .onChange((value: boolean) => { 104 console.info('Checkbox3 change is' + value) 105 }) 106 Text('Checkbox3').fontSize(20) 107 } 108 } 109 } 110 } 111} 112``` 113多选框组三种状态图示： 114 115 116 117 118 119 120
