除了视觉效果实现全选和反选以外，咱们经常需要获取选中的值，接下来看看如何实现。

核心步骤：

        1. 给 CheckBoxGroup 注册 onChange。
        2. CheckBox 添加 name 属性。
        3. 在 onChange 的回调函数中获取 选中的 name 属性。

事件：

名称 功能描述
onChange (callback: (event:CheckboxGroupResult) => void ) CheckboxGroup的选中状态或群组内的Checkbox的选
中状态发生变化时，触发回调。

CheckboxGroupResult对象说明： 

名称 类型 描述
name Array 群组内所有被选中的多选框名称。  name 属性
status SelectStatus 选中状态。

代码演示：

@Entry
@Component
struct CheckBoxGroupPage {
  fruits: string[] = ['西瓜', '西红柿', '西兰花', '西葫芦']
  @State selectedKeys: string [] = []//定义一个变量用于接收数据
  build() {
    Column() {
      Text('选中的是:' + this.selectedKeys)
      Row() {
        CheckboxGroup({
          group: 'food'//群组名称
        })
          .onChange((event: CheckboxGroupResult) => {
            console.log('event:', JSON.stringify(event))
            this.selectedKeys = event.name
          })
          .selectAll(true)//设置是否全选 默认值为：false  设置的是默认全选
        Text('全选')
      }
      Column() {
        ForEach(this.fruits, (item: string) => {
          Row() {
            Checkbox({
              name: item.toString(),//拿到的数据赋值给name
              group: 'food'//群组名称

            })
            Text(item)//内容
          }
        })
      }
      .padding({ left: 20 })
      .alignItems(HorizontalAlign.Start)
    }
    .padding(20)
    .alignItems(HorizontalAlign.Start)
  }
}

效果演示：

控制台效果： 

# harmonyos # 华为 # 前端
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

六星光芒阵：HarmonyOS API 24 Canvas 高级绘图实战

avatar HarmonyOS开发者社区
cover

N 边形对称万花筒：HarmonyOS API 24 Canvas 动画深度解析：有Gif效果图

avatar HarmonyOS开发者社区

鸿蒙原生 ArkTS 毛玻璃日历卡片组件

本文介绍了一个基于鸿蒙6.0/OpenHarmony API 12+ ArkUI框架开发的毛玻璃效果日历卡片组件Demo。该组件采用纯原生ArkTS(Stage模型)实现，主要展示了沉浸式毛玻璃效果(backgroundBlurStyle)、悬浮阴影、月份切换弹性动画(animateTo+Curve.Friction)、按压反馈(scale+animateTo)、日期高亮等特性。项目结构清晰，包含

avatar HarmonyOS开发者社区