为什么捐赠
API 资源管理器
复选框

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

提示

请参考 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,则:indet -> 第一种状态 -> 第二种状态 -> indet(并重复)
  • 否则(没有 toggle-indeterminate):indet -> 第一种状态 -> 第二种状态 -> 第一种状态 -> 第二种状态 -> ...
切换顺序



数组模型

数组作为模型



自定义模型值

自定义模型值



带 QOptionGroup

提示

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

与 QOptionGroup 一起使用



带 QItem

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

带 QItem



禁用

禁用



原生表单提交

当处理具有 actionmethod 的原生表单时(例如,在将 Quasar 与 ASP.NET 控制器一起使用时),您需要在 QCheckbox 上指定 name 属性,否则 formData 将不包含它(如果应该) - 所有值都转换为字符串(原生行为,因此不要使用对象值)

原生表单