全国工厂的网站建设广州网站设计

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

核心步骤：

        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(),//拿到的数据赋值给namegroup: 'food'//群组名称})Text(item)//内容}})}.padding({ left: 20 }).alignItems(HorizontalAlign.Start)}.padding(20).alignItems(HorizontalAlign.Start)}
}

效果演示：

控制台效果：