Semantic UI 中的 Checkbox 组件提供了增强的复选框功能，具有多种状态、类型和行为。该组件将原生的 HTML 复选框转换为交互式、可定制的 UI 元素，包括标准的复选框、单选按钮、开关和滑块。
Semantic UI Checkbox 组件实现为一个 jQuery 插件，它增强了 HTML 的复选框和单选输入。它提供了一致的 API 来管理不同复选框类型的状态、外观和行为。
来源: src/definitions/modules/checkbox.js22-773 src/definitions/modules/checkbox.less29-41
Checkbox 组件遵循 Semantic UI 中使用的模块模式。它附加到 DOM 元素，并提供操作状态、处理事件和响应用户交互的方法。
来源: src/definitions/modules/checkbox.js63-752
Checkbox 组件支持四种不同的类型，每种类型都有独特的视觉呈现和行为。
标准复选框提供二元选择，并带有一个可选的中间状态。
单选按钮是一种变体，它只允许具有相同 name 属性的组内进行一次选择。
滑块为二元选项提供视觉滑动控件。
开关是用于启用/禁用选项的类似开关的控件。
来源: src/definitions/modules/checkbox.less277-573
复选框有多种状态，可以通过编程或用户交互来应用。
| 状态管理 | 描述 | CSS 类 | JavaScript 方法 |
|---|---|---|---|
| 选中 | 选中状态 | .checked | check() |
| 未选中 | 未选中状态 | (无类) | uncheck() |
| 中间状态 | 第三种状态（既非选中也非未选中） | .indeterminate | indeterminate() |
| 确定状态 | 明确的选中或未选中状态 | (无类) | determinate() |
| 已禁用 | 无法交互 | .disabled | disable() |
| 已启用 | 正常交互状态 | (无类) | enable() |
| 只读 | 无交互的视觉状态 | .read-only | (通过属性设置) |
来源: src/definitions/modules/checkbox.js220-292 src/definitions/modules/checkbox.less129-265
Checkbox 组件提供了用于以编程方式控制复选框的方法
| 方法 | 描述 |
|---|---|
$('.ui.checkbox').checkbox('check') | 选中复选框 |
$('.ui.checkbox').checkbox('uncheck') | 取消选中复选框 |
$('.ui.checkbox').checkbox('indeterminate') | 设置为中间状态 |
$('.ui.checkbox').checkbox('determinate') | 清除中间状态 |
$('.ui.checkbox').checkbox('enable') | 启用复选框 |
$('.ui.checkbox').checkbox('disable') | 禁用复选框 |
$('.ui.checkbox').checkbox('toggle') | 切换当前状态 |
$('.ui.checkbox').checkbox('is checked') | 返回是否选中 |
$('.ui.checkbox').checkbox('is unchecked') | 返回是否未选中 |
$('.ui.checkbox').checkbox('is indeterminate') | 返回是否为中间状态 |
$('.ui.checkbox').checkbox('is disabled') | 返回是否禁用 |
$('.ui.checkbox').checkbox('is enabled') | 返回是否启用 |
来源: src/definitions/modules/checkbox.js220-498 src/definitions/modules/checkbox.js575-590 src/definitions/modules/checkbox.js309-334
Checkbox 组件提供各种事件的回调
该组件提供以下回调
| 回调 | 目的 |
|---|---|
onChange | 在任何状态更改后触发 |
onChecked | 选中后触发 |
onUnchecked | 取消选中后触发 |
onDeterminate | 变为确定状态后触发 |
onIndeterminate | 变为中间状态后触发 |
onEnable | 启用后触发 |
onDisable | 禁用后触发 |
beforeChecked | 选中之前（可取消） |
beforeUnchecked | 取消选中之前（可取消） |
beforeDeterminate | 变为确定状态之前（可取消） |
beforeIndeterminate | 变为中间状态之前（可取消） |
来源: src/definitions/modules/checkbox.js789-807 src/definitions/modules/checkbox.js220-267
Checkbox 组件可以通过各种选项进行配置
| 选项 | 默认 | 描述 |
|---|---|---|
uncheckable | 'auto' | 单选按钮是否可以取消选中 |
fireOnInit | false | 在初始化时是否触发回调 |
onChange | function(){} | 值更改时调用 |
onChecked | function(){} | 选中时调用 |
onUnchecked | function(){} | 取消选中时调用 |
onDeterminate | function(){} | 确定状态时调用 |
onIndeterminate | function(){} | 中间状态时调用 |
onEnable | function(){} | 启用时调用 |
onDisable | function(){} | 禁用时调用 |
Checkbox 组件还通过主题系统提供了几种 CSS 自定义选项，包括大小、颜色、动画和间距。
来源: src/definitions/modules/checkbox.js775-829 src/themes/default/modules/checkbox.variables1-193
Checkbox 组件创建以下 DOM 结构
.ui.checkbox
input[type="checkbox"]
label
单选按钮
.ui.radio.checkbox
input[type="radio"]
label
滑块和开关
.ui.slider.checkbox
input[type="checkbox"]
label
.ui.toggle.checkbox
input[type="checkbox"]
label
来源: src/definitions/modules/checkbox.js527-538 src/definitions/modules/checkbox.less29-55
Checkbox 组件提供键盘交互，支持