amis/docs/zh-CN/components/form/checkboxes.md

title	description	type	group	menuName	icon	order
Checkboxes 复选框		0	null	Checkboxes		9

用于实现多选。

基本用法

{
    "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 属性配置全选

{
    "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"
            }
            ]
        }
    ]
}

按钮模式

{
    "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

{
    "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属性调整展示列的个数

{
    "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 还有一种数组形式，可以手动控制每行显示的列数

{
    "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 字段可以实现分组展示效果。

{
  "type": "form",
  "mode": "horizontal",
  "body": [
    {
      "type": "checkboxes",
      "name": "checkboxes",
      "label": "城市选择",
      "inline": false,
      "options": [
        {
          "label": "A类型",
          "children": [
            {
              "value": "选项 A-1",
              "label": "a-1"
            },
            {
              "value": "选项 A-2",
              "label": "a-2"
            }
          ]
        },
        {
          "label": "B类型",
          "children": [
            {
              "value": "选项 B-1",
              "label": "b-1"
            },
            {
              "value": "选项 B-2",
              "label": "b-2"
            },
            {
              "value": "选项 B-3",
              "label": "b-3"
            },
            {
              "value": "选项 B-4",
              "label": "b-4"
            }
          ]
        }
      ]
    }
  ]
}

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名	类型	默认值	说明
options	Array<object>或Array<string>		选项组
source	string或 API		动态选项组
delimiter	string	,	拼接符
labelField	string	"label"	选项标签字段
valueField	string	"value"	选项值字段
joinValues	boolean	true	拼接值
extractValue	boolean	false	提取值
columnsCount	number	1	选项按几列显示，默认为一列
checkAll	boolean	false	是否支持全选
inline	boolean	true	是否显示为一行
defaultCheckAll	boolean	false	默认是否全选
creatable	boolean	false	新增选项
createBtnLabel	string	"新增选项"	新增选项
addControls	Array<表单项>		自定义新增表单项
addApi	API		配置新增选项接口
editable	boolean	false	编辑选项
editControls	Array<表单项>		自定义编辑表单项
editApi	API		配置编辑选项接口
removable	boolean	false	删除选项
deleteApi	API		配置删除选项接口

事件表

事件名称	事件参数	说明
change	value: string | Option[] 选中值	选中值发生变化时触发

动作表

动作名称	动作配置	说明
clear	-	清空
reset	-	重置