Checkbox多选框

• 在一组可选项中进行多项选择时；

• 单独使用可以表示两种状态之间的切换，和 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

基本用法

简单的 checkbox。

联动 checkbox。

import { Checkbox, Button } from 'antd';
class App extends React.Component {
  state = {
    checked: true,
    disabled: false,
  };
  toggleChecked = () => {
    this.setState({ checked: !this.state.checked });
  };
  toggleDisable = () => {
    this.setState({ disabled: !this.state.disabled });
  };
  onChange = e => {
    console.log('checked = ', e.target.checked);
    this.setState({
      checked: e.target.checked,
    });
  };
  render() {
      this.state.disabled ? 'Disabled' : 'Enabled'
    }`;
    return (
      <div>
        <p style={{ marginBottom: '20px' }}>
            checked={this.state.checked}
            disabled={this.state.disabled}
            onChange={this.onChange}
          >
            {label}
          </Checkbox>
        </p>
        <p>
          <Button type="primary" size="small" onClick={this.toggleChecked}>
            {!this.state.checked ? 'Check' : 'Uncheck'}
          </Button>
          <Button
            style={{ marginLeft: '10px' }}
            type="primary"
            size="small"
            onClick={this.toggleDisable}
          >
            {!this.state.disabled ? 'Disable' : 'Enable'}
          </Button>
        </p>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

在实现全选效果时，你可能会用到 indeterminate 属性。

不可用

import { Checkbox } from 'antd';
  <div>
    <Checkbox defaultChecked={false} disabled />
    <Checkbox defaultChecked disabled />
  </div>,
  mountNode,
);

方便的从数组生成 Checkbox 组。

布局

Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用，可以实现灵活的布局。

import { Checkbox, Row, Col } from 'antd';
function onChange(checkedValues) {
  console.log('checked = ', checkedValues);
}
ReactDOM.render(
  <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
    <Row>
      <Col span={8}>
        <Checkbox value="A">A</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="B">B</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="C">C</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="D">D</Checkbox>
      </Col>
      <Col span={8}>
        <Checkbox value="E">E</Checkbox>
      </Col>
    </Row>
  </Checkbox.Group>,
  mountNode,

Checkbox

Checkbox Group

方法

Checkbox