# Checkbox 多选框
---
### 基础用法，使用v-model来双向绑定

<div class="demo-block">
 <y-checkbox v-model="checked">选项一 </y-checkbox>
 <y-checkbox>选项二 </y-checkbox>
</div>
<script>
export default {
  data() {
    return {
      checked:true,
      checkAll: false,
      indeterminate: false,
      check: []
    }
  },
  methods:{
    handelCheckAll:function(v){
      if(this.indeterminate){
        this.checkAll=false
      }else{
        this.checkAll = !this.checkAll
      }
      this.indeterminate=false;
      if(this.checkAll){
        this.check=["选项一","选项二","选项三","选项四"]
      }else{
        this.check=[]
      }
    },
    handelCheck:function(data){
      if(data.length==4){
        this.indeterminate = false;
        this.checkAll = true;
      }else if(data.length>0){
        this.indeterminate=true;
        this.checkAll=false
      }else{
        this.indeterminate=false;
        this.checkAll=false
      }
    }
  }
}
</script>

::: demo

``` html
<template>
  <y-checkbox v-model="checked">单选框 </y-checkbox>
  <y-checkbox>多选框 </y-checkbox>
</template>

<script>
  export default{
    data(){
      return{
        checked:true
      }

    }
  }
</script>
```
:::


### 禁用状态  
通过添加```disabled```禁用状态  

<div class="demo-block">
    <y-checkbox-group :value="[]">
		<y-checkbox label="不可更改选项一" disabled></y-checkbox>
		<y-checkbox label="不可更改选项二" disabled></y-checkbox>
	</y-checkbox-group>
</div>

::: demo

```html
<template>
    <y-checkbox-group :value="[]">
		<y-checkbox label="不可更改选项一" disabled></y-checkbox>
		<y-checkbox label="不可更改选项二" disabled></y-checkbox>
	</y-checkbox-group>
</template>
```
:::

### 全选  

<div class="demo-block">
	<y-checkbox :value="checkAll" :indeterminate="indeterminate" @click.prevent.native="handelCheckAll">全选</y-checkbox>
	</br></br>
	<y-checkbox-group v-model="check" @change="handelCheck">
	  <y-checkbox label="选项一" ></y-checkbox>
	  <y-checkbox label="选项二" ></y-checkbox>
	  <y-checkbox label="选项三" ></y-checkbox>
	  <y-checkbox label="选项四" ></y-checkbox>
	</y-checkbox-group>
</div>


::: demo

```html
<template>
<y-checkbox :value="checkAll" :indeterminate="indeterminate" @click.prevent.native="handelCheckAll">全选</y-checkbox>
</br></br>
<y-checkbox-group v-model="check" @change="handelCheck">
  <y-checkbox label="选项一" ></y-checkbox>
  <y-checkbox label="选项二" ></y-checkbox>
  <y-checkbox label="选项三" ></y-checkbox>
  <y-checkbox label="选项四" ></y-checkbox>
</y-checkbox-group>
</template>

 <script>
  export default {
  data() {
    return {
      checked:true,
      checkAll: false,
      indeterminate: false,
      check: []
    }
  },
  methods:{
    handelCheckAll:function(v){
      if(this.indeterminate){
        this.checkAll=false
      }else{
        this.checkAll = !this.checkAll
      }
      this.indeterminate=false;
      if(this.checkAll){
        this.check=["选项一","选项二","选项三","选项四"]
      }else{
        this.check=[]
      }
    },
    handelCheck:function(data){
      if(data.length==4){
        this.indeterminate = false;
        this.checkAll = true;
      }else if(data.length>0){
        this.indeterminate=true;
        this.checkAll=false
      }else{
        this.indeterminate=false;
        this.checkAll=false
      }
    }
  }
}
</script>
```
:::

### 按钮式
结合```YCheckboxGroup```,```YCheckbox```使用

<div class="demo-block">
  <y-checkbox-group>
    <y-checkbox-button type="plain">复选按钮一</y-checkbox-button>
    <y-checkbox-button type="plain">复选按钮二</y-checkbox-button>
    <y-checkbox-button type="plain">复选按钮三</y-checkbox-button>
  </y-checkbox-group>
</div>

::: demo

```html
<template>
  <y-checkbox-group>
    <y-checkbox-button type="plain">复选按钮一</y-checkbox-button>
    <y-checkbox-button type="plain">复选按钮二</y-checkbox-button>
    <y-checkbox-button type="plain">复选按钮三</y-checkbox-button>
  </y-checkbox-group>
</template>
```
:::


### y-checkbox 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
|value|只在单独使用时有效。可以使用 v-model 双向绑定数据|Boolean|true/false|false|
| label | 只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目 | String | Number   |    --   | --  |
| disabled  | 是否禁用 | boolean   |    true/false    | false   |
| change      | 在选项状态发生改变时触发，返回当前状态 | Function  |  -- |  --  |



### y-checkbox-group 属性说明
| 属性      | 说明     | 类型      | 默认值   |
|---------- |--------  |---------- |-------- |
|value|只在单独使用时有效。可以使用 v-model 双向绑定数据|Boolean|true/false|false|
| disabled  | 是否禁用 | boolean   |    true/false    | false   |
| change      | 在选项状态发生改变时触发，返回当前状态 | Function  |  -- |  --  |