浅谈 Checkbox Group 的双向数据绑定。php基础理念

前言
不曾想在忙碌的工作面前，写一篇技术博客也成了奢求。

Checkbox 作为表单中最常见的一类元素，使用方式分为单值和多值，其中单值的绑定很简单，就是 true 和 false，但是多值（Checkbox Group）的绑定就有一点复杂了。在实际工作中发现很多组件库关于 checkbox-group 的双向绑定一直很别扭，或者说多多少少都有一些瑕疵。

开始本文之前，我们先假定有如下需求：

数据列表和输出值都是对象数组。能否只用一个双向绑定就完成数据的输入输出，而不是在得到绑定的数据之后再使用数组的 filter、map 这些方法去过滤和筛选。

着急的同学可以直接看最终的实现方案：Checkbox Group

现有组件库的实现及缺陷
调研一下市面上的组件库会发现，checkbox-group 并不是一个通用组件，很多组件库并没有这个组件，其中 Ant Design 的 checkbox-group 的设计方案算是比较完善的。简单看一下 Ant Design 是如何设计这个组件的。

1、Ant Design React 版的实现：

<Checkbox.Group options={options} defaultValue={[‘Pear’]} onChange={onChange} />
options 和 defaultValue 的类型定义如下：

interface Option {
label: string;
value: string;
disabled?: boolean;
}

defaultValue: string[];
2、Ant Design Angular 版的实现：

<nz-ch