菜单

复选框
复选框允许用户从一组较小的选项中选择一个值,通常是二进制的。

下载

类型

复选框

标准复选框

单选

复选框可以格式化为单选元素。这意味着它是一个独占选项。

滑块

复选框可以格式化为强调当前选择状态。

切换

复选框可以格式化为显示开或关的选择。

状态

只读

复选框可以是只读的,无法更改状态。

选中

复选框可以被选中。

不确定

复选框可以是不确定的。

不确定状态只能在 JavaScript 中设置,请参阅示例部分。

禁用

复选框可以是只读的,无法更改状态。

复选框可以通过在隐藏的输入上设置 disabled 属性或在 ui 复选框上设置 disabled 类来禁用。


变体

贴合

贴合的复选框不会为标签保留填充。

示例

使用回调

复选框有每个状态更改行为的两种版本,让您可以确定调用是否应触发复选框回调。

调用 check 之类的行为将触发元素的回调,但是使用 set checked 将调整复选框状态*而不会触发回调*。

这种区分对于区分程序性更改和用户调用状态更改很重要。

示例
控制台
切换
选中
取消选中
不确定
确定
启用
禁用
设置选中
设置取消选中
设置不确定
设置确定
设置启用
设置禁用
var $console = $('.callback .console') ; $('.callback.example .checkbox') .checkbox() .first().checkbox({ onChecked: function() { $console.append('onChecked called
'); }, onUnchecked: function() { $console.append('onUnchecked called
'); }, onEnable: function() { $console.append('onEnable called
'); }, onDisable: function() { $console.append('onDisable called
'); }, onDeterminate: function() { $console.append('onDeterminate called
'); }, onIndeterminate: function() { $console.append('onIndeterminate called
'); }, onChange: function() { $console.append('onChange called
'); } }) ; // 将事件绑定到按钮 $('.callback.example .button') .on('click', function() { $('.callback .checkbox').checkbox( $(this).data('method') ); }) ;

分组复选框

indeterminate 状态可以用来表示既不是选中也不是取消选中的一种值。

这在具有“主”复选框的组中很有用,主复选框应该显示几个其他复选框的选择。

$('.list .master.checkbox') .checkbox({ // 在选中时选中所有子项 onChecked: function() { var $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; $childCheckbox.checkbox('check'); }, // 在取消选中时取消选中所有子项 onUnchecked: function() { var $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; $childCheckbox.checkbox('uncheck'); } }) ;
$('.list .child.checkbox') .checkbox({ // 加载时触发以设置父项值 fireOnInit : true, // 每个子复选框更改时更改父项状态 onChange : function() { var $listGroup = $(this).closest('.list'), $parentCheckbox = $listGroup.closest('.item').children('.checkbox'), $checkbox = $listGroup.find('.checkbox'), allChecked = true, allUnchecked = true ; // 检查是否所有其他同级都已选中或取消选中 $checkbox.each(function() { if( $(this).checkbox('is checked') ) { allUnchecked = false; } else { allChecked = false; } }); // 设置父复选框状态,但不要触发其 onChange 回调 if(allChecked) { $parentCheckbox.checkbox('set checked'); } else if(allUnchecked) { $parentCheckbox.checkbox('set unchecked'); } else { $parentCheckbox.checkbox('set indeterminate'); } } }) ;

检查条件

复选框 包括四个新的回调 beforeChecked、beforeUnchecked、beforeDeterminate 和 beforeIndeterminate,从这些回调中返回 false 将在输入值更新之前取消操作。

$('.cancel.example .ui.checkbox') .checkbox({ beforeChecked: function() { var luckyPerson = (Math.random() < 0.5) ; return luckyPerson; } }) ;

单向选择

要使用户能够选中一个框,但不能取消选中它,请使用 uncheckable 设置。

要始终禁用复选框,请将 disabled 属性添加到您的输入中。

要使复选框为只读,请不要对其进行初始化,或者包含 read-only 类,这将不允许事件发生。

$('.state.example .checkbox') .last() .checkbox({ uncheckable: false }) ;

将事件附加到其他元素

复选框可以使用 attach events 行为轻松地将事件附加到其他激活元素。默认情况下,它会切换,但也可以使用其他行为。

$('.test.checkbox').checkbox('attach events', '.toggle.button'); $('.test.checkbox').checkbox('attach events', '.check.button', 'check'); $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
切换
选中
取消选中

初始化

复选框

复选框不需要 JavaScript 就能正常工作。

功能齐全的复选框

使用 JavaScript 结合复选框将自动使复选框的标签触发对输入的更改并提供回调函数。此外,一些状态(如不确定)只能通过 JavaScript 触发。

链接标签

如果您只需要标签来链接而不需要 JavaScript 复选框的任何其他功能,则可以将标签的 for 属性与输入的 id 匹配。

行为

可以使用 JavaScript 使用以下语法访问行为

$('.ui.checkbox').checkbox(行为, argumentOne, argumentTwo...);
toggle 将复选框从当前状态切换。
check 将复选框状态设置为选中。
uncheck 将复选框状态设置为未选中。
indeterminate 设置为不确定的复选框。
determinate 设置为确定的复选框。
启用 启用与复选框的交互
设置选中 将复选框状态设置为选中,不带回调函数
设置未选中 将复选框状态设置为未选中,不带回调函数
设置不确定 将复选框设置为不确定状态,不带回调函数
设置确定 将复选框设置为确定状态,不带回调函数
设置已启用 启用与复选框的交互,不带回调函数
设置已禁用 禁用与复选框的交互,不带回调函数
附加事件 (选择器,行为) 将复选框事件附加到另一个元素
是否是单选按钮 返回元素是否是单选按钮
是否选中 返回元素当前是否选中
是否未选中 返回元素是否未选中
可以更改 返回元素是否可以更改
应该允许选中 返回元素是否可以选中(检查是否已选中或 `beforeChecked` 是否会取消)
应该允许取消选中 返回元素是否可以取消选中(检查是否已取消选中或 `beforeUnchecked` 是否会取消)
应该允许确定 返回元素是否可以确定(检查是否已确定或 `beforeDeterminate` 是否会取消)
应该允许不确定 返回元素是否可以不确定(检查是否已不确定或 `beforeIndeterminate` 是否会取消)
可以取消选中 返回元素是否可以取消选中

复选框

这些设置特定于复选框,并决定其行为的参数

默认 描述
不可选中 自动 设置为 true/false 将决定输入是否允许不选择。自动将仅对单选按钮设置禁止此行为
初始化时触发 false 选中状态的回调函数是否应该在初始化和更改时触发
上下文 描述
onChange HTML 输入元素 复选框选中或取消选中后的回调函数。
onChecked HTML 输入元素 复选框选中后的回调函数。
onIndeterminate HTML 输入元素 复选框设置为不确定状态后的回调函数。
onDeterminate HTML 输入元素 复选框设置为确定状态后的回调函数。
onUnchecked HTML 输入元素 复选框取消选中后的回调函数。
beforeChecked HTML 输入元素 复选框选中前的回调函数。可以通过返回 false 取消更改
beforeIndeterminate HTML 输入元素 复选框设置为不确定状态前的回调函数。可以通过返回 false 取消更改
beforeDeterminate HTML 输入元素 复选框设置为确定状态前的回调函数。可以通过返回 false 取消更改
beforeUnchecked HTML 输入元素 复选框取消选中前的回调函数。可以通过返回 false 取消更改
onEnable HTML 输入元素 复选框启用后的回调函数。
onDisable HTML 输入元素 复选框禁用后的回调函数。

模块

这些设置是所有模块的原生设置,定义了组件如何将内容绑定到 DOM 属性,以及模块的调试设置。

默认 描述
名称 复选框 日志语句中使用的名称
命名空间 复选框 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。
选择器
选择器 : { input : 'input[type=checkbox], input[type=radio]', label : 'label' }
用于查找模块部分的选择器
类名
className : { checked : 'checked', disabled : 'disabled', radio : 'radio', readOnly : 'read-only' }
用于确定元素状态的类名
静默 False 使所有控制台输出静音,包括错误消息,无论其他调试设置如何。
调试 false 将调试输出到控制台
性能 true 显示带有性能指标的 console.table 输出
详细 false 调试输出包括所有内部行为
错误
error : { method : 'The method you called is not defined.' }

变暗消息
变暗子标题