---
title: Checkboxes 复选框
description:
type: 0
group: null
menuName: Checkboxes
icon:
order: 9
---
用于实现多选。
## 基本用法
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 显示全选
通过 `checkAll` 属性配置全选
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"checkAll": true,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 按钮模式
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"optionType": "button",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 按列显示
设置 `"inline": false`
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"inline": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 展示多行
可以配置`columnsCount`属性调整展示列的个数
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes1",
"type": "checkboxes",
"label": "默认的复选框",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
},
{
"type": "divider"
},
{
"name": "checkboxes2",
"type": "checkboxes",
"label": "显示两列的复选框",
"columnsCount": 2,
"inline": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
> 1.8.0 及以上版本
`columnsCount` 还有一种数组形式,可以手动控制每行显示的列数
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes1",
"type": "checkboxes",
"label": "默认的复选框",
"columnsCount": [1, 2, 3],
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
},
{
"label": "OptionE",
"value": "e"
},
{
"label": "OptionF",
"value": "f"
}
]
}
]
}
```
## 分组显示
`"inline": false` 下,选项中配置 `children` 字段可以实现分组展示效果。
```schema: scope="body"
{
"type": "form",
"mode": "horizontal",
"debug": true,
"body": [
{
"type": "checkboxes",
"name": "checkboxes",
"label": "城市选择",
"inline": false,
"checkAll": true,
"options": [
{
"label": "A类型",
"children": [
{
"label": "选项 A-1",
"value": "a-1"
},
{
"label": "选项 A-2",
"value": "a-2"
}
]
},
{
"label": "B类型",
"children": [
{
"label": "选项 B-1",
"value": "b-1"
},
{
"label": "选项 B-2",
"value": "b-2"
},
{
"label": "选项 B-3",
"value": "b-3"
},
{
"label": "选项 B-4",
"value": "b-4"
}
]
}
]
}
]
}
```
## 自定义选项渲染
> 2.0.0 及以上版本
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"name": "checkboxes",
"type": "checkboxes",
"label": "复选框",
"menuTpl": "${label}",
"options": [
{
"label": "OptionA",
"value": "a",
"klass": "success"
},
{
"label": "OptionB",
"value": "b",
"klass": "danger"
},
{
"label": "OptionC",
"value": "c",
"klass": "warning"
},
{
"label": "OptionD",
"value": "d",
"klass": "info"
}
]
}
]
}
```
## 属性表
当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
| options | `Array