HarmonyOS 在CheckboxGroup中，如何知道当前用户选择Checkbox的id或name

在CheckboxGroup中，如何知道当前用户选择Checkbox的id或name？

场景描述：有多个表盘供用户选择，需要把用户选择的表盘发给蓝牙设备。现在用CheckboxGroup可以实现多选，却无法知道用户选择了哪些？

HarmonyOS

fox280

2024-12-26 16:51:04

浏览

回答 1

待解决

回答 1

按赞同

按时间

Excelsior_abit

请参考下以下demo：

class CheckName {
  public id: string
  public productName: string
  constructor(id: string, productName: string) {
    this.id = id
    this.productName = productName
  }
}
@Entry
@Component
struct CheckboxExample {
  @State services: CheckName[] = [
    new CheckName('1', 'checkbox1'),
    new CheckName('2', 'checkbox2'),
    new CheckName('3', 'checkbox3'),
    new CheckName('4', 'checkbox4'),
  ];
@State clickIndex:string = ''
  @State clickName:string = ''
  @State selectIndexList: Array<string> = []
  build() {
    Scroll() {
      Column() {
        // 全选按钮
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((itemName: CheckboxGroupResult) => {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
          Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }

        ForEach(this.services, (item: CheckName, index) => {
          Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
            Checkbox({ name: item.productName, group: 'checkboxGroup' })
              .selectedColor('#007DFF')
              .onChange((value: boolean) => {
                this.clickIndex = item.id;
                this.clickName = item.productName;
                if(value == true) {
                  this.selectIndexList.push(item.productName);
                }else {
                  this.selectIndexList = this.selectIndexList.filter((element) => {
                    return element !== item.productName;
                    // 返回不等于要删除元素的元素构成新数组
                  });
                }
              })
            Text(item.productName).fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
          }.margin({ left: 36 })
        }, (item: string) => item)
        Text(this.selectIndexList.toString()).fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
      }
    }
  }
}