In a user input form, a checkbox gives the user a binary choice. A checkbox can be used for a single choice, like whether or not to subscribe to a newsletter, or in a situation where the user can select several of many possible choices, like choosing from many pizza toppings in an order form.在用户输入表单中,复选框为用户提供了二进制选择。 复选框可用于单一选择,例如是否订阅新闻通讯,或者用于从多个选项中选择几个的情况(例如从订单表单的许多披萨馅料中选择)。
The checkbox widget is located in the Forms section of the Default widget library.复选框部件位于“默认”部件库的“表单”部分中。 |
Box Size and Alignment多选框尺寸和对齐方式
In the Button section of the Style pane, you can use the Size field to set the width and height of the box portion of the checkbox. By default, the box portion of a checkbox is on the left, and the label text is on the right. To swap the order so that the text is on the left and the box is on the right, use the Align icons to the right of the Size field. 在“样式”窗格的“按钮”部分中,可以使用“大小”字段来设置复选框的框部分的宽度和高度。 默认情况下,复选框的框部分在左侧,标签文本在右侧。 要交换顺序,以使文本位于左侧,而框位于右侧,请使用“大小”字段右侧的“对齐”图标。 |
Tip提示
Align the box to the right when prototyping forms in right-to-left languages, such as Arabic or Hebrew.使用从右到左的语言(例如阿拉伯语或希伯来语)对表单进行原型制作时,将框向右对齐。
Editing the Label Text编辑标签文字
You can edit the text on a checkbox widget's label via any of the options below:你可以通过以下任一选项来编辑复选框部件标签上的文本:
Double-click the checkbox label to enter text-editing mode双击复选框标签进入文本编辑模式
Select the checkbox label and pressENTERto enter text-editing mode选择复选框标签,然后按Enter进入文本编辑模式
Right-click the checkbox label and select Edit Text in the context menu右键单击复选框标签,然后在上下文菜单中选择“编辑文本”
Select the checkbox label and begin typing. (This option is only available if you have disabled the single-key shortcuts)选择复选框标签并开始输入。 (仅当你禁用了单键快捷方式时,此选项才可用)
Special Properties特殊属性
Checked by Default默认选中
By default, a checkbox begins in its unchecked state when the page first loads in the web browser. To instead have a checkbox begin in its checked state, select the checkbox and click its box on the canvas. You can also check the Selected option in the More Properties menu in the Interactions pane.默认情况下,当页面首次加载到Web浏览器中时,复选框以其未选中状态开始。 要改为使复选框开始处于选中状态,请选中该复选框,然后在画布上单击其复选框。 你还可以在“交互”窗格的“更多属性”菜单中选中“选定”选项。 |
Disabled禁用
Disabling a checkbox prevents users from interacting with it in the web browser. This also activates the widget's :disabled style effect, making it appear greyed-out.禁用复选框可防止用户在Web浏览器中与其进行交互。 这也会激活部件的:禁用样式效果,使其显示为灰色。
There are two ways to disable a widget:有两种禁用部件的方法:
Check the Disabled checkbox in the More Properties menu of the Interactions pane.在“交互”窗格的“更多属性”菜单中,选中“禁用”复选框。
Disable the widget dynamically in the web browser with the Enable/Disable action. You can do this as part of any interaction, such as when the page loads or when a button is clicked.通过启用/禁用操作在Web浏览器中动态禁用窗口部件。 你可以在任何交互过程中执行此操作,例如在页面加载或单击按钮时。
Tip提示
You can dynamically enable a disabled widget in the web browser with the Enable/Disable action. Check out the Terms and Conditions tutorial for an example of how this can be done.你可以使用“启用/禁用”操作在Web浏览器中动态启用禁用的窗口部件。 请查看“条款和条件”教程,以获取有关如何完成此操作的示例。
Special Interactions特殊交互
Checking and Unchecking a Checkbox选中和取消选中复选框
In the web browser, you can click a checkbox to check and uncheck it.在Web浏览器中,你可以单击复选框以选中和取消选中它。
You can also dynamically check and uncheck a checkbox with the Set Selected/Checked action. The true value option will check the checkbox, and the false option will uncheck it. The toggle option will set the checkbox to the opposite of the state it's in when the interaction occurs.你还可以通过“设置选择/已选中”操作动态地选中和取消选中一个复选框。 真值选项将选中该复选框,而假选项将取消选中该复选框。 切换选项会将复选框设置为与互动发生时相反的状态。
Capturing and Evaluating the Checked State获取选中状态
You can determine whether or not a checkbox is checked via the is selected of value option in interactions and conditions. The value "true" is returned if the checkbox is checked, and "false" is returned if the checkbox is not checked.你可以通过交互和条件中的“选中状态”选项来确定是否选中了复选框。 如果选中该复选框,则返回值“ true”,如果未选中该复选框,则返回“ false”。
Submit Button提交按钮
Pressing the ENTER key while a checkbox has focus in the web browser can fire the Click or Tap event of another widget on the page, known as the checkbox's "submit button."在复选框在Web浏览器中获取焦点时按ENTER键可以触发页面上另一个部件的点击事件,称为复选框的“提交按钮”。 To assign a submit button to a checkbox:要将提交按钮分配给复选框:
To unassign the submit button, click Unassign Submit Button at the bottom of the dropdown.要取消分配提交按钮,请单击下拉列表底部的取消分配提交按钮。 |
Limitations and Workarounds局限性和解决方法
Indeterminate State不确定状态
In some design patterns, checkboxes have a third, "indeterminate" state in which they are neither checked nor unchecked. If you need a checkbox that can have three states, you can make a custom checkbox using shape widgets and a dynamic panel.在某些设计模式中,复选框具有第三种“不确定”状态,在这种状态下既没选中也没未选中。 如果需要具有三个状态的复选框,则可以使用形状部件和动态面板创建自定义复选框。
Tab Order制表顺序
Tab order for checkboxes and other form widgets is determined by their layer depth, as shown in the Outline pane. You can learn more about this and how to change a widget's tab order in the Organizing Widgets article.复选框和其他表单窗口部件的制表顺序由其层深确定,如“概要”窗格中所示。 你可以在“管理部件”文章中了解有关此内容以及如何更改部件制表顺序的更多信息。