当前位置：首页 > article >正文

鸿蒙harmonyOS笔记：练习CheckBoxGroup获取选中的值

article 2025/3/24 19:39:59

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

核心步骤：

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)
  }
}