多选框 Checkbox - Ant Design

Checkbox

简单的 checkbox。

TypeScript
JavaScript
import React from 'react';
import { Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

const onChange = (e: CheckboxChangeEvent) => {
  console.log(`checked = ${e.target.checked}`);
};

const App: React.FC = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;

export default App;

Checked-Enabled

受控的 Checkbox

联动 checkbox。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Button, Checkbox } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';

const App: React.FC = () => {
  const [checked, setChecked] = useState(true);
  const [disabled, setDisabled] = useState(false);

  const toggleChecked = () => {
    setChecked(!checked);
  };

  const toggleDisable = () => {
    setDisabled(!disabled);
  };

  const onChange = (e: CheckboxChangeEvent) => {
    console.log('checked = ', e.target.checked);
    setChecked(e.target.checked);
  };

  const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;

  return (
    <>
      <p style={{ marginBottom: '20px' }}>
        <Checkbox checked={checked} disabled={disabled} onChange={onChange}>
          {label}
        </Checkbox>
      </p>
      <p>
        <Button type="primary" size="small" onClick={toggleChecked}>
          {!checked ? 'Check' : 'Uncheck'}
        </Button>
        <Button style={{ margin: '0 10px' }} type="primary" size="small" onClick={toggleDisable}>
          {!disabled ? 'Disable' : 'Enable'}
        </Button>
      </p>
    </>
  );
};

export default App;

Check all

ApplePearOrange

全选

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

TypeScript
JavaScript
import React, { useState } from 'react';
import { Checkbox, Divider } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];
const defaultCheckedList = ['Apple', 'Orange'];

const App: React.FC = () => {
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  const onChange = (list: CheckboxValueType[]) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

  const onCheckAllChange = (e: CheckboxChangeEvent) => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  return (
    <>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        Check all
      </Checkbox>
      <Divider />
      <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
    </>
  );
};

export default App;

参数	说明	类型	默认值
autoFocus	自动获取焦点	boolean	false
checked	指定当前是否选中	boolean	false
defaultChecked	初始是否选中	boolean	false
disabled	失效状态	boolean	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false
onChange	变化时的回调函数	(e: CheckboxChangeEvent) => void	-

参数	说明	类型	默认值
defaultValue	默认选中的选项	(string \| number)[]	[]
disabled	整组失效	boolean	false
name	CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性	string	-
options	指定可选项	string[] \| number[] \| Option[]	[]
value	指定选中的选项	(string \| number \| boolean)[]	[]
onChange	变化时的回调函数	(checkedValue: CheckboxValueType[]) => void	-

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

参数	说明	类型	默认值
autoFocus	自动获取焦点	boolean	false
checked	指定当前是否选中	boolean	false
defaultChecked	初始是否选中	boolean	false
disabled	失效状态	boolean	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false
onChange	变化时的回调函数	(e: CheckboxChangeEvent) => void	-

参数	说明	类型	默认值
defaultValue	默认选中的选项	(string \| number)[]	[]
disabled	整组失效	boolean	false
name	CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性	string	-
options	指定可选项	string[] \| number[] \| Option[]	[]
value	指定选中的选项	(string \| number \| boolean)[]	[]
onChange	变化时的回调函数	(checkedValue: CheckboxValueType[]) => void	-

Ant Design

Checkbox多选框

Ant Design

Checkbox多选框

何时使用

代码演示

API

Checkbox

Checkbox Group

Option

方法

Checkbox

何时使用

代码演示

API

Checkbox

Checkbox Group

Option

方法

Checkbox