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?: CheckboxGroupOptions) 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 a group name belong to the same group. 18 19**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description | 26| ------- | ----------------------------------------------------- | ---- | -------------------- | 27| options | [CheckboxGroupOptions](#checkboxgroupoptions) | No | Check box group parameters.| 28 29## CheckboxGroupOptions 30 31| Name| Type| Mandatory| Description| 32| -------- | -------- | -------- | -------- | 33| group | string | No| Group name.<br>**NOTE**<br>If there are multiple check box groups with the same group name, only the first check box group takes effect.| 34 35## Attributes 36 37In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 38 39| Name| Type| Description| 40| -------- | -------- | -------- | 41| selectAll | boolean | Whether to select all.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If the **select** attribute is set for a [\<Checkbox>](ts-basic-components-checkbox.md) component in the same group, the setting of the **\<Checkbox>** has a higher priority.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 42| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected check box.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_activated')**<br>An invalid value is handled as the default value.<br>Since API version 9, this API is supported in ArkTS widgets.| 43| unselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the check box when it is not selected.| 44| mark<sup>10+</sup> | [MarkStyle](#markstyle10) | Internal icon style of the check box.| 45 46## Events 47 48In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 49 50| Name| Description| 51| -------- | -------- | 52| onChange (callback: (event: [CheckboxGroupResult](#checkboxgroupresult)) => void ) |Triggered when the selected status of the check box group or any check box wherein changes.<br>Since API version 9, this API is supported in ArkTS widgets.| 53 54## CheckboxGroupResult 55 56Since API version 9, this API is supported in ArkTS widgets. 57 58| Name | Type | Description | 59| ------ | ------ | ------- | 60| name | Array<string> | Names of all the selected check boxes in the group.| 61| status | [SelectStatus](#selectstatus) | Selected status.| 62 63## SelectStatus 64 65Since API version 9, this API is supported in ArkTS widgets. 66 67| Name | Description| 68| ----- | -------------------- | 69| All | All check boxes in the group are selected.| 70| Part | Some check boxes in the group are selected.| 71| None | None of the check boxes in the group are selected.| 72 73## MarkStyle<sup>10+</sup> 74 75| Name | Type | Mandatory| Default Value | Description | 76| ----------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------------------------ | 77| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Color of the internal mark. | 78| size | number \| string | No | - | Size of the internal mark, in vp. The default size is the same as the width of the check box group component.<br>This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| 79| strokeWidth | number \| string | No | 2 | Stroke width of the internal mark, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| 80 81## Example 82 83### Example 1 84 85```ts 86// xxx.ets 87@Entry 88@Component 89struct CheckboxExample { 90 build() { 91 Scroll() { 92 Column() { 93 // Select All button 94 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 95 CheckboxGroup({ group: 'checkboxGroup' }) 96 .selectedColor('#007DFF') 97 .onChange((itemName: CheckboxGroupResult) => { 98 console.info("checkbox group content" + JSON.stringify(itemName)) 99 }) 100 Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 101 } 102 103 // Option 1 104 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 105 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 106 .selectedColor('#007DFF') 107 .onChange((value: boolean) => { 108 console.info('Checkbox1 change is' + value) 109 }) 110 Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 111 }.margin({ left: 36 }) 112 113 // Option 2 114 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 115 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 116 .selectedColor('#007DFF') 117 .onChange((value: boolean) => { 118 console.info('Checkbox2 change is' + value) 119 }) 120 Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 121 }.margin({ left: 36 }) 122 123 // Option 3 124 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 125 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 126 .selectedColor('#007DFF') 127 .onChange((value: boolean) => { 128 console.info('Checkbox3 change is' + value) 129 }) 130 Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 131 }.margin({ left: 36 }) 132 } 133 } 134 } 135} 136``` 137 138 139### Example 2 140 141```ts 142// xxx.ets 143@Entry 144@Component 145struct Index { 146 147 build() { 148 Row() { 149 Column() { 150 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 151 CheckboxGroup({ group: 'checkboxGroup' }) 152 .selectedColor(Color.Orange) 153 .onChange((itemName: CheckboxGroupResult) => { 154 console.info("checkbox group content" + JSON.stringify(itemName)) 155 }) 156 .mark({ 157 strokeColor:Color.Black, 158 size: 40, 159 strokeWidth: 5 160 }) 161 .unselectedColor(Color.Red) 162 .width(30) 163 .height(30) 164 Text('Select All').fontSize(20) 165 }.margin({right:15}) 166 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 167 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 168 .selectedColor(0x39a2db) 169 .onChange((value: boolean) => { 170 console.info('Checkbox1 change is'+ value) 171 }) 172 .mark({ 173 strokeColor:Color.Black, 174 size: 50, 175 strokeWidth: 5 176 }) 177 .unselectedColor(Color.Red) 178 .width(30) 179 .height(30) 180 Text('Checkbox1').fontSize(20) 181 } 182 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 183 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 184 .selectedColor(0x39a2db) 185 .onChange((value: boolean) => { 186 console.info('Checkbox2 change is' + value) 187 }) 188 .width(30) 189 .height(30) 190 Text('Checkbox2').fontSize(20) 191 } 192 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 193 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 194 .selectedColor(0x39a2db) 195 .onChange((value: boolean) => { 196 console.info('Checkbox3 change is' + value) 197 }) 198 .width(30) 199 .height(30) 200 Text('Checkbox3').fontSize(20) 201 } 202 } 203 .width('100%') 204 } 205 .height('100%') 206 } 207} 208``` 209 210 211
