## Checkbox 多选框

主要用于一组可选项多项选择，或者单独用于切换选中状态。

### 基本用法

```html
<v-checkbox v-model="isChecked1">京东商城</v-checkbox>
```
```javascript
export default {
  date() {
    return {
      isChecked: true,
    };
  },
}
```

### 禁用状态

```html
<v-checkbox v-model="isChecked2" disabled>京东商城</v-checkbox>
<v-checkbox v-model="isChecked3" disabled>京东金融</v-checkbox>
```
```javascript
export default {
  data() {
    return {
      isChecked2: true,
      isChecked3: false
    };
  },
}
```

### change事件

```html
<v-checkbox v-model="isChecked4" @change="handleChange">京东商城</v-checkbox>
```
```javascript
export default {
  data() {
    return {
      isChecked4: true,
    };
  },
  methods: {
    handleChange(value) {
      console.log(`当前的值:${value}`);
    },
  },
}
```

### checkbox组

```html
 <v-checkbox-group v-model="result" @change="handleGroupChange">
  <v-checkbox
    v-for="item in list"
    :key="item"
    :name="item"
  >
    复选框 {{ item }}
  </v-checkbox>
</v-checkbox-group>
```
```javascript
export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      result: ['a', 'b'],
    };
  },
  methods: {
    handleGroupChange(value) {
      console.log(`当前的值:${value}`);
    },
  },
}
```

### 所有选项都被禁用

```html
  <v-checkbox-group v-model="result" disabled>
    <v-checkbox
      v-for="item in list"
      :key="item"
      :name="item"
    >
      复选框 {{ item }}
    </v-checkbox>
  </v-checkbox-group>
```
```javascript
export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      result: ['a', 'b'],
    };
  },
}
```

### 设置最多可选数

```html
  <v-checkbox-group
    v-model="result2"
    :max="2"
    >
    <v-checkbox
      v-for="item in list"
      :key="item"
      :name="item"
    >
      复选框 {{ item }}
    </v-checkbox>
  </v-checkbox-group>
```
```javascript
export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      result2: ['a', 'b'],
    };
  },
}
```

### Checkbox Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| v-model  | 是否为选中状态   | Boolean   | -   | false |
| name  | 标识 Checkbox 名称   | any   | -   | - |
| disabled  |  是否为禁用状态  | Boolean   |  -  | false |

### CheckboxGroup Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| v-model  |   所有选中项的 name   | Array   |  -  | 无 |
| max  | 设置最大可选数   | Number   |  -  | 无限制 |
| disabled  |  是否禁用所有的选项  | Boolean   |  -  | false |

### Checkbox Events

| 参数      | 说明    | 参数     |
|---------- |-------- |---------- |
| change  | 切换选项时触发    | 当前选中项的 value |

### CheckboxGroup Events

| 参数      | 说明    | 参数     |
|---------- |-------- |---------- |
| change  | 切换选项时触发    | 当前选中项的 value |