Checkbox多选框

多选框。

何时使用

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

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

代码演示

Checkbox多选框 - 图1

基本用法

简单的 checkbox。

  1. import { Checkbox } from 'antd';
  2. function onChange(e) {
  3. console.log(`checked = ${e.target.checked}`);
  4. }
  5. ReactDOM.render(<Checkbox onChange={onChange}>Checkbox</Checkbox>, mountNode);

Checkbox多选框 - 图2

受控的 Checkbox

联动 checkbox。

  1. import { Checkbox, Button } from 'antd';
  2. class App extends React.Component {
  3. state = {
  4. checked: true,
  5. disabled: false,
  6. };
  7. toggleChecked = () => {
  8. this.setState({ checked: !this.state.checked });
  9. };
  10. toggleDisable = () => {
  11. this.setState({ disabled: !this.state.disabled });
  12. };
  13. onChange = e => {
  14. console.log('checked = ', e.target.checked);
  15. this.setState({
  16. checked: e.target.checked,
  17. });
  18. };
  19. render() {
  20. const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${
  21. this.state.disabled ? 'Disabled' : 'Enabled'
  22. }`;
  23. return (
  24. <div>
  25. <p style={{ marginBottom: '20px' }}>
  26. <Checkbox
  27. checked={this.state.checked}
  28. disabled={this.state.disabled}
  29. onChange={this.onChange}
  30. >
  31. {label}
  32. </Checkbox>
  33. </p>
  34. <p>
  35. <Button type="primary" size="small" onClick={this.toggleChecked}>
  36. {!this.state.checked ? 'Check' : 'Uncheck'}
  37. </Button>
  38. <Button
  39. style={{ margin: '0 10px' }}
  40. type="primary"
  41. size="small"
  42. onClick={this.toggleDisable}
  43. >
  44. {!this.state.disabled ? 'Disable' : 'Enable'}
  45. </Button>
  46. </p>
  47. </div>
  48. );
  49. }
  50. }
  51. ReactDOM.render(<App />, mountNode);

Checkbox多选框 - 图3

全选

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

  1. import { Checkbox } from 'antd';
  2. const CheckboxGroup = Checkbox.Group;
  3. const plainOptions = ['Apple', 'Pear', 'Orange'];
  4. const defaultCheckedList = ['Apple', 'Orange'];
  5. class App extends React.Component {
  6. state = {
  7. checkedList: defaultCheckedList,
  8. indeterminate: true,
  9. checkAll: false,
  10. };
  11. onChange = checkedList => {
  12. this.setState({
  13. checkedList,
  14. indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
  15. checkAll: checkedList.length === plainOptions.length,
  16. });
  17. };
  18. onCheckAllChange = e => {
  19. this.setState({
  20. checkedList: e.target.checked ? plainOptions : [],
  21. indeterminate: false,
  22. checkAll: e.target.checked,
  23. });
  24. };
  25. render() {
  26. return (
  27. <div>
  28. <div className="site-checkbox-all-wrapper">
  29. <Checkbox
  30. indeterminate={this.state.indeterminate}
  31. onChange={this.onCheckAllChange}
  32. checked={this.state.checkAll}
  33. >
  34. Check all
  35. </Checkbox>
  36. </div>
  37. <br />
  38. <CheckboxGroup
  39. options={plainOptions}
  40. value={this.state.checkedList}
  41. onChange={this.onChange}
  42. />
  43. </div>
  44. );
  45. }
  46. }
  47. ReactDOM.render(<App />, mountNode);
  1. .site-checkbox-all-wrapper {
  2. border-bottom: 1px solid #e9e9e9;
  3. }

Checkbox多选框 - 图4

不可用

checkbox 不可用。

  1. import { Checkbox } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Checkbox defaultChecked={false} disabled />
  5. <br />
  6. <Checkbox defaultChecked disabled />
  7. </div>,
  8. mountNode,
  9. );

Checkbox多选框 - 图5

Checkbox 组

方便的从数组生成 Checkbox 组。

  1. import { Checkbox } from 'antd';
  2. function onChange(checkedValues) {
  3. console.log('checked = ', checkedValues);
  4. }
  5. const plainOptions = ['Apple', 'Pear', 'Orange'];
  6. const options = [
  7. { label: 'Apple', value: 'Apple' },
  8. { label: 'Pear', value: 'Pear' },
  9. { label: 'Orange', value: 'Orange' },
  10. ];
  11. const optionsWithDisabled = [
  12. { label: 'Apple', value: 'Apple' },
  13. { label: 'Pear', value: 'Pear' },
  14. { label: 'Orange', value: 'Orange', disabled: false },
  15. ];
  16. ReactDOM.render(
  17. <div>
  18. <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
  19. <br />
  20. <br />
  21. <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
  22. <br />
  23. <br />
  24. <Checkbox.Group
  25. options={optionsWithDisabled}
  26. disabled
  27. defaultValue={['Apple']}
  28. onChange={onChange}
  29. />
  30. </div>,
  31. mountNode,
  32. );

Checkbox多选框 - 图6

布局

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

  1. import { Checkbox, Row, Col } from 'antd';
  2. function onChange(checkedValues) {
  3. console.log('checked = ', checkedValues);
  4. }
  5. ReactDOM.render(
  6. <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
  7. <Row>
  8. <Col span={8}>
  9. <Checkbox value="A">A</Checkbox>
  10. </Col>
  11. <Col span={8}>
  12. <Checkbox value="B">B</Checkbox>
  13. </Col>
  14. <Col span={8}>
  15. <Checkbox value="C">C</Checkbox>
  16. </Col>
  17. <Col span={8}>
  18. <Checkbox value="D">D</Checkbox>
  19. </Col>
  20. <Col span={8}>
  21. <Checkbox value="E">E</Checkbox>
  22. </Col>
  23. </Row>
  24. </Checkbox.Group>,
  25. mountNode,
  26. );

API

属性

Checkbox

参数说明类型默认值版本
autoFocus自动获取焦点booleanfalse
checked指定当前是否选中booleanfalse
defaultChecked初始是否选中booleanfalse
disabled失效状态booleanfalse
indeterminate设置 indeterminate 状态,只负责样式控制booleanfalse
onChange变化时回调函数Function(e:Event)-

Checkbox Group

参数说明类型默认值版本
defaultValue默认选中的选项string[][]
disabled整组失效booleanfalse
nameCheckboxGroup 下所有 input[type="checkbox"]name 属性string-
options指定可选项string[] | Option[][]
value指定选中的选项string[][]
onChange变化时回调函数Function(checkedValue)-
Option
  1. interface Option {
  2. label: string;
  3. value: string;
  4. disabled?: boolean;
  5. }

方法

Checkbox

名称描述版本
blur()移除焦点
focus()获取焦点