fix checkbox gourp change event && improve docs (#2412)

* improve docs

* fix checkbox group change event

examples/docs/en-US/checkbox.md

@@ -1,4 +1,5 @@
 <script>
+  const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
   module.exports = {
     data() {
       return {
@@ -7,8 +8,26 @@
         checked: true,
         checked1: false,
         checked2: true,
-        isValid: 'valid'
+        isValid: 'valid',
+        checkAll: false,
+        cities: cityOptions,
+        checkedCities: ['上海', '北京'],
+        isIndeterminate: false
       };
+    },
+    methods: {
+      handleChange(ev) {
+        console.log(ev);
+      },
+      handleCheckAllChange(event) {
+        this.checkedCities = event.target.checked ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      }
     }
   };
 </script>
@@ -93,6 +112,47 @@ It is used for multiple checkboxes which are bound in one group, and indicates w
 ```
 :::
 
+### Indeterminate
+
+The `indeterminate` property can help you to achieve a 'check all' effect.
+
+:::demo
+
+```html
+<template>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
+  <div style="margin: 15px 0;"></div>
+  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['ShangHai', 'BeiJing', 'GuangZhou', 'ShenZhen'];
+  export default {
+    data() {
+      return {
+        checkAll: true,
+        checkedCities: [],
+        cities: cityOptions,
+        isIndeterminate: false
+      };
+    },
+    methods: {
+      handleCheckAllChange(event) {
+        this.checkedCities = event.target.checked ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |

examples/docs/zh-CN/checkbox.md

@@ -1,4 +1,5 @@
 <script>
+  const cityOptions = ['上海', '北京', '广州', '深圳'];
   module.exports = {
     data() {
       return {
@@ -7,12 +8,25 @@
         checked: false,
         checked1: false,
         checked2: true,
-        isValid: '可用'
+        isValid: '可用',
+        checkAll: false,
+        cities: cityOptions,
+        checkedCities: ['上海', '北京'],
+        isIndeterminate: false
       };
     },
     methods: {
       handleChange(ev) {
         console.log(ev);
+      },
+      handleCheckAllChange(event) {
+        this.checkedCities = event.target.checked ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
       }
     }
   };
@@ -108,6 +122,47 @@
 ```
 :::
 
+### indeterminate 状态
+
+`indeterminate` 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
+
+:::demo
+
+```html
+<template>
+  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+  <div style="margin: 15px 0;"></div>
+  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+    <el-checkbox v-for="city in cities" :label="city">{{city}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+<script>
+  const cityOptions = ['上海', '北京', '广州', '深圳'];
+  export default {
+    data() {
+      return {
+        checkAll: true,
+        checkedCities: [],
+        cities: cityOptions,
+        isIndeterminate: false
+      };
+    },
+    methods: {
+      handleCheckAllChange(event) {
+        this.checkedCities = event.target.checked ? cityOptions : [];
+        this.isIndeterminate = false;
+      },
+      handleCheckedCitiesChange(value) {
+        let checkedCount = value.length;
+        this.checkAll = checkedCount === this.cities.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |

packages/checkbox/src/checkbox-group.vue

@@ -14,7 +14,6 @@
 
     watch: {
       value(value) {
-        this.$emit('change', value);
         this.dispatch('ElFormItem', 'el.form.change', [value]);
       }
     }

packages/checkbox/src/checkbox.vue

@@ -18,7 +18,7 @@
         :true-value="trueLabel"
         :false-value="falseLabel"
         v-model="model"
-        @change="$emit('change', $event)"
+        @change="handleChange"
         @focus="focus = true"
         @blur="focus = false">
       <input
@@ -29,7 +29,7 @@
         :value="label"
         :name="name"
         v-model="model"
-        @change="$emit('change', $event)"
+        @change="handleChange"
         @focus="focus = true"
         @blur="focus = false">
     </span>
@@ -124,6 +124,14 @@
         } else {
           this.model = this.trueLabel || true;
         }
+      },
+      handleChange(ev) {
+        this.$emit('change', ev);
+        if (this.isGroup) {
+          this.$nextTick(_ => {
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
+          });
+        }
       }
     },