复选框元件 #

在用户输入表单中,复选框为用户提供了一个二元选择。复选框可以用于一个单一的选择,如是否订阅邮件列表等。

复选框元件位于 Default 元件库的 Forms 部分。

复选框的尺寸和排列方式 #

Style 面板的 Button 部分,你可以使用 Size 字段来设置复选框的方框部分的宽度和高度。

默认情况下,复选框的方框部分在左边,而标签文本在右边。Align 要调换顺序,使文本在左边,方框在右边,请使用 Size 字段右边的图标。

提示

当用从右到左的语言(如阿拉伯语或希伯来语)进行表格原型设计时,将方框向右对齐。

编辑标签文本 #

你可以通过以下任何一个选项来编辑复选框元件的标签上的文字。

  • 双击复选框标签,进入文本编辑模式
  • 选择复选框标签并按下 回车 键,进入文本编辑模式
  • 右键单击复选框标签,在上下文菜单中选择 Edit Text
  • 选择复选框标签并开始输入。

特殊属性 #

默认勾选 #

默认情况下,当页面第一次在浏览器中加载时,复选框开始处于未选中状态。

要让一个复选框开始处于选中状态,请选择该复选框并在画布上点击其方框。

你也可以在 Interactions 面板中选中 Selected 选项。

禁用 #

禁用一个复选框可以防止用户在浏览器中与它交互。这也会激活元件的 禁用效果 (opens new window) ,使它看起来是灰色的。

有两种方法可以禁用一个元件。

  • 选中 Interactions 面板底部的 Disabled 复选框。

  • Enable/Disable 动作在浏览器中动态地禁用该元件。你可以作为任何交互的一部分来做,比如当页面加载或点击按钮时。

提示

你可以用 Enable/Disable 动作在网页浏览器中动态地启用一个被禁用的元件。

特殊的 Interactions(交互) #

勾选和取消选中复选框 #

在浏览器中,你可以点击一个复选框来选中和取消选中。

你也可以设置来选中和取消选中的状态。true 值选项将选中该复选框,而 false 选项将取消选中。toggle 选项将把复选框设置为与交互发生时的状态相反。

提交按钮 #

当一个复选框在浏览器中拥有焦点时按下 回车 键,可以触发页面上另一个元件的 Click or Tap 事件,也就是复选框的 “提交按钮”。

要给复选框指定一个提交按钮。

  1. 选择复选框,并在 Interactions 面板的下部点击 Show All

  2. Submit Button 下拉菜单中,从符合条件的元件列表中选择。

要取消提交按钮的分配,请点击下拉菜单底部的 Unassign Submit Button

限制和解决方法 #

不确定的状态 #

在一些设计模式中,复选框有第三种 “不确定” 状态,即既不勾选也不取消选中。如果你需要一个可以有三种状态的复选框,你可以使用 形状元件 (opens new window)dynamic panel (opens new window) 来制作一个自定义复选框。

标签顺序 #

复选框和其他窗体元件的标签顺序是由它们的层深度决定的,如 Outline 面板中所示。你可以在 组织元件 (opens new window) 文章中了解更多关于这个问题以及如何改变元件的标签顺序。