# Checkbox 多选框 | tmagic-editor
页面可视化平台

Skip to content

# Checkbox 多选框 ​

一组备选项中进行多选

## 基础用法 ​

单独使用可以表示两种状态之间的切换。

要使用 Checkbox 组件，只需要配置type: 'checkbox'，选中意味着变量的值为true。默认绑定变量的值会是 Boolean ，选中为 true 。

    [
      {
        type: "checkbox",
        name: "checkbox",
        text: "选项"
      }
    ]

显示配置

## 禁用状态 ​

多选框不可用状态。

设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。

    [
      {
        type: "checkbox",
        name: "checkbox",
        text: "选项",
        disabled: () => true
      }
    ]

显示配置

## 多选框组 ​

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

checkbox-group 元素能把多个 checkbox 管理为一组。

    [
      {
        type: "checkbox-group",
        name: "checkbox",
        text: "选项",
        options: [
          {
            text: "选项1",
            value: 1
          },
          {
            text: "选项2",
            value: 2
          }
        ]
      }
    ]

显示配置

## Checkbox Attributes ​

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
name | 绑定值 | string | — | —
text | 表单标签 | string | — | —
disabled | 是否禁用 | boolean / FilterFunction | — | false
activeValue | 选中时的值 | string / number / Function | — | 1
inactiveValue | 没有选中时的值 | string / number / Function | — | 0
onChange | 值变化时触发的函数 | OnChangeHandler | — | -

## CheckboxGroup Attributes ​

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
name | 绑定值 | string | — | —
text | 表单标签 | string | — | —
disabled | 是否禁用 | boolean / FilterFunction | — | false
onChange | 值变化时触发的函数 | OnChangeHandler | — | -
options | 选项 | Array | — | -