diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif
deleted file mode 100644
index 27b1a29a14e3bfca893f853d1e185c7493afb366..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup1.png b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a18be91d5081f825d87432e328e89a37dbbb9a2
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup1.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup2.png b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup2.png
new file mode 100644
index 0000000000000000000000000000000000000000..8773021cca2e2a49e68649de30a0b597bd581470
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup2.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup3.png b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup3.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6e91d1ed0253fea37cf81af7818897c87376e07
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/checkboxgroup3.png differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
index 17fb28bc968f6860669727307ba8f132d60d77a0..1d7f7832ebad0f21db99fb203e6324baff9d7e36 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
@@ -66,18 +66,19 @@ struct CheckboxExample {
   build() {
     Scroll() {
       Column() {
+        // 全选按钮
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           CheckboxGroup({ group: 'checkboxGroup' })
             .selectedColor(0xed6f21)
             .onChange((itemName: CheckboxGroupResult) => {
-              console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
+              console.info("checkbox group content" + JSON.stringify(itemName))
             })
-          Text('select all').fontSize(20)
+          Text('Select All').fontSize(20)
         }
 
+        // 选项1
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-            .select(true)
             .selectedColor(0x39a2db)
             .onChange((value: boolean) => {
               console.info('Checkbox1 change is' + value)
@@ -85,9 +86,9 @@ struct CheckboxExample {
           Text('Checkbox1').fontSize(20)
         }
 
+        // 选项2
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
-            .select(false)
             .selectedColor(0x39a2db)
             .onChange((value: boolean) => {
               console.info('Checkbox2 change is' + value)
@@ -95,9 +96,9 @@ struct CheckboxExample {
           Text('Checkbox2').fontSize(20)
         }
 
+        // 选项3
         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
           Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
-            .select(true)
             .selectedColor(0x39a2db)
             .onChange((value: boolean) => {
               console.info('Checkbox3 change is' + value)
@@ -109,4 +110,8 @@ struct CheckboxExample {
   }
 }
 ```
-![](figures/checkboxgroup.gif)
+多选框组三种状态图示：
+
+![](figures/checkboxgroup1.png)
+![](figures/checkboxgroup2.png)
+![](figures/checkboxgroup3.png)