Merge pull request #1162 from ant-design/improve-checkbox-group

CheckboxGroup support label in option

components/checkbox/Group.jsx

@@ -32,11 +32,23 @@ export default React.createClass({
       });
     }
   },
+  getOptions() {
+    const { options } = this.props;
+    return options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          label: option,
+          value: option,
+        };
+      }
+      return option;
+    });
+  },
   toggleOption(option) {
-    const optionIndex = this.state.value.indexOf(option);
+    const optionIndex = this.state.value.indexOf(option.value);
     const value = [...this.state.value];
     if (optionIndex === - 1) {
-      value.push(option);
+      value.push(option.value);
     } else {
       value.splice(optionIndex, 1);
     }
@@ -46,16 +58,16 @@ export default React.createClass({
     this.props.onChange(value);
   },
   render() {
-    const options = this.props.options;
+    const options = this.getOptions();
     return (
       <div className="ant-checkbox-group">
         {
           options.map(option =>
             <Checkbox disabled={this.props.disabled}
-              checked={this.state.value.indexOf(option) !== -1}
+              checked={this.state.value.indexOf(option.value) !== -1}
               onChange={this.toggleOption.bind(this, option)}
-              className="ant-checkbox-group-item" key={option}>
-              {option}
+              className="ant-checkbox-group-item" key={option.value}>
+              {option.label}
             </Checkbox>
           )
         }

components/checkbox/demo/group.md

@@ -2,7 +2,7 @@
 
 - order: 3
 
-方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。
+方便的从数组生成 Checkbox 组。
 
 ---
 
@@ -14,7 +14,23 @@ function onChange(checkedValues) {
   console.log('checked = ', checkedValues);
 }
 
+const plainOptions = ['Apple', 'Pear', 'Orange'];
+const options = [{
+  label: '苹果',
+  value: 'Apple',
+}, {
+  label: '梨',
+  value: 'Pear',
+}, {
+  label: '橘',
+  value: 'Orange',
+}];
+
 ReactDOM.render(
-  <CheckboxGroup options={['Apple', 'Pear', 'Orange']} defaultValue={['Apple']} onChange={onChange} />
+<div>
+  <CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
+  <br />
+  <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
+</div>
 , mountNode);
 ````