• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Checkbox
2
3提供多选框组件,通常用于某选项的打开或关闭。
4
5>  **说明:**
6>
7>  该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9## 子组件
10
1112
13## 接口
14
15Checkbox(options?: {name?: string,  group?: string })
16
17从API version 9开始,该接口支持在ArkTS卡片中使用。
18
19**参数:**
20
21| 参数名  | 参数类型 | 必填  | 参数描述 |
22| --------| --------| ------ | -------- |
23| name    | string | 否 | 多选框名称。 |
24| group   | string | 否 | 多选框的群组名称。<br/>**说明:** <br/>未配合使用CheckboxGroup组件时,此值无用。 |
25
26## 属性
27
28除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
29
30
31| 名称          | 参数类型 | 描述 |
32| ------------- | ------- | -------- |
33| select        | boolean | 设置多选框是否选中。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
34| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置多选框选中状态颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
35
36## 事件
37
38支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
39
40| 名称                                         | 功能描述                                                     |
41| -------------------------------------------- | ------------------------------------------------------------ |
42| onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。<br>- value为true时,表示已选中。<br>- value为false时,表示未选中。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
43
44## 示例
45
46```ts
47// xxx.ets
48@Entry
49@Component
50struct CheckboxExample {
51
52  build() {
53    Row() {
54      Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})
55        .select(true)
56        .selectedColor(0xed6f21)
57        .onChange((value: boolean) => {
58          console.info('Checkbox1 change is'+ value)
59        })
60      Checkbox({name: 'checkbox2',  group: 'checkboxGroup'})
61        .select(false)
62        .selectedColor(0x39a2db)
63        .onChange((value: boolean) => {
64          console.info('Checkbox2 change is'+ value)
65        })
66    }
67  }
68}
69```
70
71
72![](figures/checkbox.gif)