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
new file mode 100644
index 0000000000..4d44e5e6a0
--- /dev/null
+++ b/components/checkbox/demo/group.md
@@ -0,0 +1,20 @@
+# 基本用法
+
+- order: 3
+
+方便的生成一个 Checkbox 组。
+
+---
+
+````jsx
+import { Checkbox } from 'antd';
+const CheckboxGroup = Checkbox.Group;
+
+function onChange(checkedValues) {
+ console.log('checked = ', checkedValues);
+}
+
+ReactDOM.render(
+
+, document.getElementById('components-checkbox-demo-group'));
+````
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
index 94aef5f39a..b04ab10b61 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.jsx
@@ -1,13 +1,18 @@
-import Checkbox from 'rc-checkbox';
+import RcCheckbox from 'rc-checkbox';
import React from 'react';
+import Group from './Group';
-export default React.createClass({
+const Checkbox = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-checkbox'
};
},
render() {
- return ;
+ return ;
}
});
+
+Checkbox.Group = Group;
+
+export default Checkbox;
diff --git a/components/checkbox/index.md b/components/checkbox/index.md
index 9095b9d0ee..b5357ec224 100644
--- a/components/checkbox/index.md
+++ b/components/checkbox/index.md
@@ -19,6 +19,15 @@
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|-----------|------------------------------------------|------------|-------|--------|
-| checked | 指定当前是否选中 | boolean | | false |
-| defaultChecked | 初始是否选中 | boolean | | false |
-| onChange | 变化时回调函数 | Function(e:Event) | | | |
+| checked | 指定当前是否选中 | boolean | | false |
+| defaultChecked | 初始是否选中 | boolean | | false |
+| onChange | 变化时回调函数 | Function(e:Event) | | | |
+
+### Checkbox Group
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|-----------|------------------------------------------|------------|---------|--------|
+| 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;
+ }
+ }
+}
+
}