为什么捐赠
API 浏览器
联系站长
复选框

QCheckbox 组件是一个基础的用户输入元素,可以用来为用户提供一个开关选项。

TIP

关于创建一组复选框的其他方式,请参阅 QOptionGroup

正在加载 QCheckbox API...

用法

基础用法

基础示例



自定义图标
v2.5+

自定义图标



标签

标签



颜色定制

在下面示例的第二行中,使用了 keep-color 属性来保持复选框在未选中状态下也保留指定的颜色。

颜色定制



紧凑模式

紧凑模式



强制暗色模式

强制暗色模式



尺寸

除了以下标准尺寸之外,您还可以通过 size 属性自定义尺寸(最后一个即为自定义尺寸的示例)。

标准尺寸



不确定状态

在下面的示例中,点击第一个复选框后它会在 true/false 之间切换。而第二个复选框借助 toggle-indeterminate 属性,可以在三种状态之间切换(不确定/true/false)。您还可以通过 indeterminate-value 属性来指定不确定状态的值,否则不确定状态的值默认为 null

不确定状态



切换顺序

默认情况下,QCheckbox 的切换顺序为:不确定 -> 选中 -> 未选中。不过,您可以通过 toggle-order 属性来更改这一行为。该属性决定了状态的切换顺序,可选值为 tf(默认)或 ftt 代表 true/选中状态,f 代表 false/未选中状态)。

切换顺序如下:

  • 如果 toggle-indeterminate 为 true:不确定 -> 第一个状态 -> 第二个状态 -> 不确定(循环往复)
  • 否则(未启用 toggle-indeterminate):不确定 -> 第一个状态 -> 第二个状态 -> 第一个状态 -> 第二个状态 -> …
切换顺序



数组 model 数据

数组作为 model 数据



自定义 model 值

自定义 model 值



配合 QOptionGroup 使用

TIP

您也可以使用 QOptionGroup,它可以简化复选框组的使用方式,如下面的示例所示。

配合 QOptionGroup 使用



配合 QItem 使用

在下面的示例中,我们渲染了一个 <label> 标签(注意 tag="label"),这样点击 QItem 时 QCheckbox 也会响应并切换选中状态。

配合 QItem 使用



禁用

禁用



原生表单提交

当使用带有 actionmethod 的原生表单时(例如在 Quasar 与 ASP.NET 控制器配合使用时),您需要为 QCheckbox 指定 name 属性,否则 formData 中将不会包含该字段。注意所有值都会被转换为字符串(这是浏览器的原生行为,因此不要使用 Object 类型的值):

原生表单