Checkbox 单选框

<Checkbox checked style={{ marginLeft: '20px' }}>
  选中状态
</Checkbox>

<Checkbox disabled style={{ marginLeft: '20px', marginRight: '20px' }}>
  未选中禁用状态
</Checkbox>
<Checkbox checked disabled>
  选中禁用状态
</Checkbox>

<Checkbox.Group value={['2']} style={{ marginLeft: '20px' }}>
  <Checkbox label="1"></Checkbox>
  <Checkbox label="2"></Checkbox>
  <Checkbox label="3"></Checkbox>
</Checkbox.Group>

() => {
  const [checkAll, setcheckAll] = React.useState(false)
  const [cities, setcities] = React.useState(['上海', '北京', '广州', '深圳'])
  const [checkedCities, setcheckedCities] = React.useState(['上海', '北京'])
  const [isIndeterminate, setisIndeterminate] = React.useState(true)
  function handleCheckAllChange(checked) {
    setisIndeterminate(false)
    setcheckAll(checked)
    setcheckedCities(checked ? ['上海', '北京', '广州', '深圳'] : [])
  }
  function handleCheckedCitiesChange(value) {
    const checkedCount = value.length
    const citiesLength = cities.length
    setcheckedCities(value)
    setcheckAll(checkedCount === citiesLength)
    setisIndeterminate(checkedCount > 0 && checkedCount < citiesLength)
  }
  return (
    <div style={{ marginLeft: '20px' }}>
      <Checkbox
        checked={checkAll}
        indeterminate={isIndeterminate}
        onChange={() => handleCheckAllChange(true)}
      >
        全选
      </Checkbox>
      <Checkbox.Group
        value={checkedCities}
        onChange={value => handleCheckedCitiesChange(value)}
      >
        {cities.map((city, index) => (
          <Checkbox key={index} label={city}></Checkbox>
        ))}
      </Checkbox.Group>
    </div>
  )
}