diff --git a/components/checkbox/Group.js b/components/checkbox/Group.js
deleted file mode 100644
index 1c9e3e9775..0000000000
--- a/components/checkbox/Group.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Checkbox from '../index';
-
-export default React.createClass({
- propTypes: {
- value: React.PropTypes.array.isOptional,
- options: React.PropTypes.array.isRequired,
- onChange: React.PropTypes.any.isOptional,
- },
- getInitialState() {
- const value = this.props.value ? this.props.value.slice() : [];
-
- return { value };
- },
- componentWillReceiveProps(nextProps) {
- const value = nextProps.value ? nextProps.value.slice() : [];
- this.setState({ value });
- },
- toggleOption(option, e) {
- e.preventDefault();
- const optionIndex = this.state.value.indexOf(option);
- const value = this.state.value.slice();
- if (optionIndex === - 1) {
- value.push(option);
- } else {
- value.splice(optionIndex, 1);
- }
- this.setState({ value });
- return this.props.onChange && this.props.onChange(value.slice());
- },
- render() {
- const options = this.props.options;
- return (
- {options.map(option =>
- [, option])
- }
-
);
- },
-});
diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx
new file mode 100644
index 0000000000..eb6db6680f
--- /dev/null
+++ b/components/checkbox/Group.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Checkbox from './index';
+
+export default React.createClass({
+ getDefaultProps() {
+ return {
+ options: [],
+ onChange() {},
+ };
+ },
+ propTypes: {
+ defaultValue: React.PropTypes.array,
+ value: React.PropTypes.array,
+ options: React.PropTypes.array.isRequired,
+ onChange: React.PropTypes.func,
+ },
+ getInitialState() {
+ const { value, defaultValue } = this.props;
+ return {
+ value: value || defaultValue || [],
+ };
+ },
+ componentWillReceiveProps(nextProps) {
+ if ('value' in nextProps) {
+ this.setState({
+ value: nextProps.value,
+ });
+ }
+ },
+ toggleOption(option) {
+ const optionIndex = this.state.value.indexOf(option);
+ const value = this.state.value;
+ if (optionIndex === - 1) {
+ value.push(option);
+ } else {
+ value.splice(optionIndex, 1);
+ }
+ if (!('value' in this.props)) {
+ this.setState({ value });
+ }
+ this.props.onChange(value);
+ },
+ render() {
+ const options = this.props.options;
+ return
+ {
+ options.map(option =>
+
+ )
+ }
+
;
+ },
+});
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index 4db2c75b40..4d44e5e6a0 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -2,7 +2,7 @@
- order: 3
-checkbox 组。
+方便的生成一个 Checkbox 组。
---
@@ -14,7 +14,7 @@ function onChange(checkedValues) {
console.log('checked = ', checkedValues);
}
-ReactDOM.render(, document.getElementById('components-checkbox-demo-group'));
+ReactDOM.render(
+
+, document.getElementById('components-checkbox-demo-group'));
````
diff --git a/components/checkbox/index.md b/components/checkbox/index.md
index f033fb5fc5..b5357ec224 100644
--- a/components/checkbox/index.md
+++ b/components/checkbox/index.md
@@ -19,14 +19,15 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
-| checked | 指定当前是否选中 | boolean | | false |
-| defaultChecked | 初始是否选中 | boolean | | false |
-| onChange | 变化时回调函数 | Function(e:Event) | | | |
+| checked | 指定当前是否选中 | boolean | | false |
+| defaultChecked | 初始是否选中 | boolean | | false |
+| onChange | 变化时回调函数 | Function(e:Event) | | | |
### Checkbox Group
-| 参数 | 说明 | 类型 | 可选值 |默认值 |
-|-----------|------------------------------------------|------------|-------|--------|
-| value | 指定选中的选项| array| | []|
-| options | 指定可选项| array| | []|
-| onChange | 变化时回调函数 | Function(e:Event) | | | |
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| defaultValue | 默认选中的选项 | array | | [] |
+| value | 指定选中的选项| array | | [] |
+| options | 指定可选项 | array | | [] |
+| onChange | 变化时回调函数 | Function(checkedValue) | | | |
diff --git a/style/components/checkbox.less b/style/components/checkbox.less
index 9d2c3f83ac..f0da1aefd2 100644
--- a/style/components/checkbox.less
+++ b/style/components/checkbox.less
@@ -161,4 +161,15 @@
margin-left: 8px;
}
+.@{checkbox-wrap-prefix-cls}-group {
+ font-size: @font-size-base;
+ &-item {
+ display: inline-block;
+ margin-left: 16px;
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+}
+
}