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 a 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.<br>**NOTE**<br>If there are multiple check box groups with the same group name, only the first check box group takes effect.| 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>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.| 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| unselectedColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the check box when it is not selected.| 36| mark<sup>10+</sup> | [MarkStyle](#markstyle10) | Internal icon style of the check box.| 37 38## Events 39 40In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 41 42| Name| Description| 43| -------- | -------- | 44| 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.| 45 46## CheckboxGroupResult 47 48Since API version 9, this API is supported in ArkTS widgets. 49 50| Name | Type | Description | 51| ------ | ------ | ------- | 52| name | Array<string> | Names of all the selected check boxes in the group.| 53| status | [SelectStatus](#selectstatus) | Selected status.| 54 55## SelectStatus 56 57Since API version 9, this API is supported in ArkTS widgets. 58 59| Name | Description| 60| ----- | -------------------- | 61| All | All check boxes in the group are selected.| 62| Part | Some check boxes in the group are selected.| 63| None | None of the check boxes in the group are selected.| 64 65## MarkStyle<sup>10+</sup> 66 67| Name | Type | Mandatory| Default Value | Description | 68| ----------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------------------------ | 69| strokeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Color of the internal mark. | 70| 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.| 71| 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.| 72 73## Example 74 75### Example 1 76 77```ts 78// xxx.ets 79@Entry 80@Component 81struct CheckboxExample { 82 build() { 83 Scroll() { 84 Column() { 85 // Select All button 86 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 87 CheckboxGroup({ group: 'checkboxGroup' }) 88 .selectedColor('#007DFF') 89 .onChange((itemName: CheckboxGroupResult) => { 90 console.info("checkbox group content" + JSON.stringify(itemName)) 91 }) 92 Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 93 } 94 95 // Option 1 96 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 97 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 98 .selectedColor('#007DFF') 99 .onChange((value: boolean) => { 100 console.info('Checkbox1 change is' + value) 101 }) 102 Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 103 }.margin({ left: 36 }) 104 105 // Option 2 106 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 107 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 108 .selectedColor('#007DFF') 109 .onChange((value: boolean) => { 110 console.info('Checkbox2 change is' + value) 111 }) 112 Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 113 }.margin({ left: 36 }) 114 115 // Option 3 116 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 117 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 118 .selectedColor('#007DFF') 119 .onChange((value: boolean) => { 120 console.info('Checkbox3 change is' + value) 121 }) 122 Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) 123 }.margin({ left: 36 }) 124 } 125 } 126 } 127} 128``` 129 130 131### Example 2 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct Index { 138 139 build() { 140 Row() { 141 Column() { 142 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 143 CheckboxGroup({ group: 'checkboxGroup' }) 144 .selectedColor(Color.Orange) 145 .onChange((itemName: CheckboxGroupResult) => { 146 console.info("checkbox group content" + JSON.stringify(itemName)) 147 }) 148 .mark({ 149 strokeColor:Color.Black, 150 size: 40, 151 strokeWidth: 5 152 }) 153 .unselectedColor(Color.Red) 154 .width(30) 155 .height(30) 156 Text('Select All').fontSize(20) 157 }.margin({right:15}) 158 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 159 Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) 160 .selectedColor(0x39a2db) 161 .onChange((value: boolean) => { 162 console.info('Checkbox1 change is'+ value) 163 }) 164 .mark({ 165 strokeColor:Color.Black, 166 size: 50, 167 strokeWidth: 5 168 }) 169 .unselectedColor(Color.Red) 170 .width(30) 171 .height(30) 172 Text('Checkbox1').fontSize(20) 173 } 174 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 175 Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) 176 .selectedColor(0x39a2db) 177 .onChange((value: boolean) => { 178 console.info('Checkbox2 change is' + value) 179 }) 180 .width(30) 181 .height(30) 182 Text('Checkbox2').fontSize(20) 183 } 184 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 185 Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) 186 .selectedColor(0x39a2db) 187 .onChange((value: boolean) => { 188 console.info('Checkbox3 change is' + value) 189 }) 190 .width(30) 191 .height(30) 192 Text('Checkbox3').fontSize(20) 193 } 194 } 195 .width('100%') 196 } 197 .height('100%') 198 } 199} 200``` 201 202 203
