1# CheckboxGroup 2 3The **\<CheckboxGroup>** component is used to select or deselect all check boxes in a group. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11Not supported 12 13## APIs 14 15CheckboxGroup(options?: { group?: string }) 16 17Creates a check box group so that you can select or deselect all check boxes in the group at the same time. Check boxes and the check box group that share the group name belong to the same group. 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| group | string | No| Group name.| 26 27## Attributes 28 29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 30 31| Name| Type| Description| 32| -------- | -------- | -------- | 33| selectAll | boolean | Whether to select all.<br>Default value: **false**<br>If **select** is explicitly set for check boxes in the group, the check box settings are prioritized.<br>Since API version 9, this API is supported in ArkTS widgets.| 34| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.<br>Since API version 9, this API is supported in ArkTS widgets.| 35 36## Events 37 38In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 39 40| Name| Description| 41| -------- | -------- | 42| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes due to a manual operation.<br>Since API version 9, this API is supported in ArkTS widgets.| 43 44## CheckboxGroupResult 45 46Since API version 9, this API is supported in ArkTS widgets. 47 48| Name | Type | Description | 49| ------ | ------ | ------- | 50| name | Array<string> | Names of all the selected check boxes in the group.| 51| status | [SelectStatus](#selectstatus) | Selected status.| 52 53## SelectStatus 54 55Since API version 9, this API is supported in ArkTS widgets. 56 57| Name | Description| 58| ----- | -------------------- | 59| All | All check boxes in the group are selected.| 60| Part | Some check boxes in the group are selected.| 61| None | None of the check boxes in the group are selected.| 62 63 64## Example 65 66```ts 67// xxx.ets 68@Entry 69@Component 70struct CheckboxExample { 71 build() { 72 Scroll() { 73 Column() { 74 // Select All button 75 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 76 CheckboxGroup({ group: 'checkboxGroup' }) 77 .selectedColor('#007DFF') 78 .onChange((itemName: CheckboxGroupResult) => { 79 console.info("checkbox group content" + JSON.stringify(itemName)) 80 }) 81 Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 82 } 83 84 // Option 1 85 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 86 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 87 .selectedColor('#007DFF') 88 .onChange((value: boolean) => { 89 console.info('Checkbox1 change is' + value) 90 }) 91 Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 92 }.margin({ left: 36 }) 93 94 // Option 2 95 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 96 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 97 .selectedColor('#007DFF') 98 .onChange((value: boolean) => { 99 console.info('Checkbox2 change is' + value) 100 }) 101 Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 102 }.margin({ left: 36 }) 103 104 // Option 3 105 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 106 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 107 .selectedColor('#007DFF') 108 .onChange((value: boolean) => { 109 console.info('Checkbox3 change is' + value) 110 }) 111 Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 112 }.margin({ left: 36 }) 113 } 114 } 115 } 116} 117``` 118 119
