复选框

QCheckbox 组件是收集用户输入的一个基本元素。您可以使用此选项为用户提供切换选项的方式。

TIP

关于创建一组复选框组的其他可能性,请参阅 QOptionGroup

QCheckbox API

Loading QCheckbox API...

用法

标准




自定义图标
v2.5+




标签




着色

在下面示例的第二行中,即使复选按钮未处于切换状态,设置了 keep-color 属性依然会进行着色。




紧凑模式和黑色模式







大小

除了下面的标准尺寸,您可以通过 size 属性定义自己的尺寸(最后一个示例是自定义尺寸)。




不定状态

在下面的示例中,只要单击第一个复选框,它就开始在真/假之间切换。然而,第二个复选框通过设置toggle-indeterminate 属性可以在三种状态(不确定/真/假)之间切换。您可以选择设置 indeterminate-value,否则不确定的值将被视为 null




切换顺序

默认情况下,QCheckbox 在点击时按照下述顺序切换值:indeterminate -> checked -> unchecked。但是您可以通过 toggle-order 属性来修改此行为。这个属性决定了切换状态的顺序是 tf(默认),或者 ftt 表示 true/checked 状态,f 表示 false/unchecked 状态)

切换顺序:

  • 如果 toggle-indeterminate 是 true,那么:indet -> first state -> second state -> indet (依次循环)
  • 否则: indet -> first state -> second state -> first state -> second state -> …



数组 model




自定义 model 值




搭配 QOptionGroup

TIP

您还可以使用 QOptionGroup,当您有多组复选框时,它可以简化使用,如下面的示例所示。




搭配 QItem

在下面的示例中,我们 渲染了一个 <label> 标签(注意 tag="label"),因此 QCheckbox 将响应 QItems 上的点击以更改切换状态。




禁用




原生表单提交

当处理一个带有 actionmethod 的原生表单时(如:使用 Quasar 和 ASP.NET 控制器时),您需要为 QCheckbox 声明 name 属性,否则表单数据中不会包含它: