勾选框示例及用法说明

码小哥

载入中...

第一题:苹果长在哪里? 第二题:苹果通常是什么颜色的? 第三题:下面哪个是苹果? 第四题:你爱吃苹果吗? 你爱苹果,苹果也爱你 :p 添加勾选框构件 在布局页签中,点击“勾选框”图标,在页面中添加一个勾选框构件。 选中新添加的勾选框,根据需要进行设置: 勾选项文字: 系统将优先显示“勾选提示文字”内容,没有则显示“选中后的字段变量值”,该文字将紧随勾选框显示。 如果你不希望在勾选框后面显示文字,请去掉“将提示或变量文字作为勾选框文字显示”。

第一题:苹果长在哪里?
第二题:苹果通常是什么颜色的?
第三题:下面哪个是苹果?
第四题:你爱吃苹果吗?
$(score)
你爱苹果,苹果也爱你 :p
添加勾选框构件

在布局页签中,点击“勾选框”图标,在页面中添加一个勾选框构件。



选中新添加的勾选框,根据需要进行设置:

勾选项文字:

系统将优先显示“勾选提示文字”内容,没有则显示“选中后的字段变量值”,该文字将紧随勾选框显示。

如果你不希望在勾选框后面显示文字,请去掉“将提示或变量文字作为勾选框文字显示”。



个性化勾选框

在勾选框的属性中,有基本的文字对齐方式。通过设置这些对齐方式,你可以控制勾选符号、文字在构件中的相对位置,满足不同的需要。



勾选框构件和其他所有构件一样,可以在构件“样式”中设置文字大小、颜色等。



通过设置勾选框构件的背景图片,可以简单地做出图片勾选框。


上图中,将图片背景的使用方式设置为“容纳”,以完整显示整个图片,位置设置为 “50% 50%”是让图片水平和垂直居中放置。

单选与复选

每个勾选框都是一个表单项,它对应着特定的变量。你可以通过指定表单字段变量名字,为每个勾选框指定相应的变量。


复选框:

如果你为每个勾选框表单指定了不同的变量名字,这些勾选框将以复选框形式显示,访问者可以选中多个勾选项。

单选框:

如果你为一些勾选框表单指定了相同的变量名字,这些勾选框将工作在单选模式下,访问者只能选中这些勾选框中某一个。

设置勾选框选中状态

在设计含有勾选框页面时,可以简单地指定“默认选中”设置勾选框是否被选中。

如果你需要在用户浏览时动态改变勾选框的选中状态,需要做这些设置:

首先,需要给勾选框指定一个选中后的值:

当勾选框被选中时,它对应的变量名取值就是这个输入的值。当用户提交表单时,这个值将发送给接受表单的服务器。

其次,在某个构件的行为中,添加上更改变量内容的动作。


如上图所示,点击某个构件后,它将执行一个更改变量值的动作,图示中的变量名“t1”是需要被选中的勾选框表单变量名,值“20”是前面设置的选中后的值。
当点击动作执行时,会自动找到表单变量名为“t1”,且值为“20”的勾选框选中它。

勾选框用于表单提交

勾选框可以像普通表单字段一样,用于“用户反馈”等表单提交场合。

在上图的例子中,设置了一个名为“gender”的勾选框表单变量,有“男女”两个勾选框同为这个名字,所以他们显示为单选项。

设置勾选框的变量值为“male”,意味着提交表单的时候,传输的内容是“male”这个英文内容,而非显示的“男”这个文字。

为了便于访问者理解,设置了勾选提示文字为“男”。这样用户看到的是中文性别,提交表单时传递的是英文内容,方便用户的同时也便于后台处理。

计算勾选项数值

前面提到了,勾选框的显示文字和变量值可以不同。灵活应用它可以用在测试打分等场合。

在本文前面的例子中,用户对苹果颜色做了不同的选择,得出的成绩分数不同。
这是给每个选项设置了不同的分值,然后在点击“回答完毕”按钮时计算所有选中的勾选框值实现的。

先来看看勾选项的设置:


假如用户选中了“绿色”,变量“t23”的值将设置为数值“10”,用户看到的是“绿色”这个选项。


当用户点击“回答完毕”这个按钮时,进行了这样的动作:

上面的截图中,将所有选项变量名相加起来,赋值给一个叫做“score”的变量。

在“更改变量值”的动作中,如果变量新的值以“=”开头,会自动提取内容中的变量名进行计算,就像 excel 中的公式一样。

之所以将计算结果赋值给“score”变量,是为了后面便于引用这个值,你可以起任何变量名。

使用计算结果

有了前面计算出的勾选项得分后,我们可以把它用在各种场合。

显示总分:

在普通的文本构件中,输入 $(变量名) 样式的内容,该变量值就会自动替换这个标记显示出来。


根据变量值进行复杂动作:


在示例中,成绩低于60分,将显示烂苹果。它的实现方法是:进入页面后,隐藏烂苹果图片,判断成绩是否低于60分,符合条件时,显示出烂苹果图片。