crowd-checkbox - Amazon SageMaker
属性元素层次结构输出另请参阅
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

crowd-checkbox

可以选中或取消选中的一个 UI 组件，让用户可以从一组选项中选择多个选项。

请参阅在 CodePen 中使用此 Crowd HTML 元素的 HTML 模板的交互式示例。

以下是使用 <crowd-checkbox> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

属性

此元素支持以下属性。

checked

一个布尔值开关，如果存在，将复选框显示为选中状态。

以下是用于默认选中复选框的语法的示例。

  <crowd-checkbox name="checkedBox" value="checked" checked>This box is checked</crowd-checkbox>

disabled

一个布尔值开关，如果存在，将复选框显示为已禁用并防止选中复选框。

以下是用于禁用复选框的语法的示例。

  <crowd-checkbox name="disabledCheckBox" value="Disabled" disabled>Cannot be selected</crowd-checkbox>

name

一个字符串，用于标识工作人员提交的答案。此值将与 JSON 对象中指定答案的密钥匹配。

必需

一个布尔值开关，如果存在，要求工作人员提供输入。

以下是用于要求选中复选框的语法的示例。

  <crowd-checkbox name="work_verified" required>Instructions were clear</crowd-checkbox>

值

一个字符串，用作输出中复选框状态的名称。如果未指定，则默认为“on”。

元素层次结构

此元素具有以下父元素和子元素。

输出

提供 JSON 对象。name 字符串是对象名称，而 value 字符串是基于复选框状态的布尔值的属性名称；如果选中，则为 true，否则为 false。

例 ：示例元素输出

对于多个框使用相同的 name 值。

<!-- INPUT -->  
<div><crowd-checkbox name="image_attributes" value="blurry"> Blurry </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="dim"> Too Dim </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="exposed"> Too Bright </crowd-checkbox></div>
//Output with "blurry" and "dim" checked
[
  {
    "image_attributes": {
      "blurry": true,
      "dim": true,
      "exposed": false
    }
  }
]

请注意，所有三个颜色值都是单个对象的属性。

对于每个框使用不同的 name 值。

<!-- INPUT -->
<div><crowd-checkbox name="Stop" value="Red"> Red </crowd-checkbox></div>
<div><crowd-checkbox name="Slow" value="Yellow"> Yellow </crowd-checkbox></div>
<div><crowd-checkbox name="Go" value="Green"> Green </crowd-checkbox></div>
//Output with "Red" checked
[
  {
    "Go": {
      "Green": false
    },
    "Slow": {
      "Yellow": false
    },
    "Stop": {
      "Red": true
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。