- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## Checkbox 多选框

一组备选项中进行多选

### 基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

checked: false
备选项

    import { BeCheckbox, BeTableColumn} from '@brewer/beerui'
    let checked = false;

    <BeCheckbox {checked} on:change={changeHandle} on:click={clickHandle}>备选项</BeCheckbox>

显示代码

### 禁用状态

多选框不可用状态。

备选项
备选项
设置disabled属性即可。

    let checked = false;

    <BeCheckbox checked={checked} disabled>备选项</BeCheckbox>
    <BeCheckbox checked disabled>备选项</BeCheckbox>

显示代码

### 多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

checked: 上海

上海
北京
广州
深圳
使用 setCheckedList 方法可设置选中数据。

    let checkedCities = []
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    let indeterminate = false
    let selectItem = () => checkboxGroup.setCheckedList(['上海'])
    let onChange = (evt) => console.log('onChange', evt.detail);
    const setCheckedListHandle = () => {
      indeterminate = !indeterminate
      indeterminate ? checkboxGroup.setCheckedList(['上海', '北京', '广州', '深圳']) : checkboxGroup.setCheckedList([])
    }
    let checkboxGroup;

    <BeButton on:click={selectItem}>选中 上海</BeButton>
    <BeButton on:click={setCheckedListHandle}>{indeterminate ? '取消全选' : '全选'}</BeButton>
    <BeCheckboxGroup bind:this={checkboxGroup} checked={checkedCities} on:change={onChange}>
      <BeCheckbox label="上海" />
      <BeCheckbox label="北京" />
      <BeCheckbox label="广州" />
      <BeCheckbox label="深圳" />
    </BeCheckboxGroup>

显示代码

### Repl

### BeCheckbox Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
checked | 绑定的值 | boolean | true/false | false
id | 选框的id | string | - | ''
disabled | 禁用 | boolean | true/false | false
name | 选框的name | string | - | ''
label | 选中状态的值 | string | - | ''

### BeCheckboxGroup Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
checked | 绑定的值 | array | - | []
validateEvent | 是否验证表单(在BeForm中使用) | boolean | true/false | true

### BeCheckbox Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 值改变的回调 | { label, checked }
click | 点击的回调 | { label, checked }

### BeCheckbox Slot

name | 说明
--- | ---
default | 自定义样式