多个checkbox存在时，如何做绑定区分

多个checkbox存在时，如何做绑定区分

详细问题： 在checkbox中，勾选全选，下方的子级checkbox会全部选中，如果不勾选的话，子级不会全部选中

场景图

难点

• 局限于数据结构复杂
• 由于多个checkbox是循环出来的，所以造成绑定了同一个值，选择一个，其他的子级checkbox全部都会被选中

思路

    将每一个大checkbox分为多个区域来循环出来，形成作用域隔离，做到互不影响。

准备工作

在解决这个问题之前，我们要先了解checkbox的绑定值问题，与普通的input输入框绑定相同，它是否勾选决定于本身的value属性，在这里我们先写一个简单的demo ：

解析

    由此可以看出，v-model绑定的这个数组中包含value的某个值，那么就会触发checked这个属性，也就是会被勾选，那么我们来推测一下，v-model在input输入框的原理：是由v-bind以及v-on同时使用结合而完成的v-model绑定效果，而v-on绑定的便是input的输入事件，在事件处理函数中会将输入的值赋值给v-bind绑定的值，从而完成v-model的绑定。那么在checkbox中也可以这么理解，点击便是input中的输入事件，点击选中之后，会向绑定的空数组中添加该value值，而本身的value值则代表了一个标识，如果绑定的数组和标识匹配，那么就会被勾选中，反之，如果本身的空数组中就有几个固定的value值，那么也会默认勾。

OK，demo到这，我们回到正题：

    首先我这个项目虽然是结合ElementUI做的，但是在写这个页面组件的时候，也是有用到原生的，所以使用到了v-for循环来循环出来对应的父级checkbox，又因为子级checkbox可能会有多个，所以又要使用v-for循环，这时候便是for循环的嵌套，在父级循环地方使用的elementUI的checkbox，绑定的是单个值，而子级的checkbox使用的原生的checkbox，绑定的则为一个空数组，value值则为了区别每一个子级的不同，绑定的数据的id值

先看代码

父级checkbox

子级checkbox

计算属性

父级绑定事件

解析

①首先利用计算属性计算出所有子checkbox的值，将他们其中的id从新返回为一个数组。
②在勾选父级checkbox时，判断是否勾选，如果为true，那么就将第一步的数组赋值给子级v-model绑定的空数组，从而完成全选的效果，如果为false，那么就清空绑定的数组，达到效果。