菜单

复选框
复选框允许用户从一个小的选项集合中选择一个值,通常是二进制表示的

下载

类型

复选框 (Checkbox)

标准的复选框

单选框 (Radio Box)

一个复选框可以被格式化为一个单选框元素。这意味着它有唯一的选择。

滑块 (Slider)

一个复选框可以格式化强调当前的选择状态

切换 (Toggle)

一个复选框可以格式化显示或关闭的选择

状态

只读 (Read-only)

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

激活 (Checked)

复选框可以显示被选择的状态

不定 (Indeterminate)

复选框可以显示出不确定状态

一个不确定状态的复选框只能在 Javascript 中初始化。

禁用 (Disabled)

一个复选框可以是禁用的。

复选框可以在隐藏的输入框中设置禁用的属性,或者在 ui checkbox 中使用disabled类来设置禁用。


变形

适应 (Fitted)

自适应复选框对标签不留间隔。

例子

使用回调 (Using Callbacks)

复选框每个状态有两个版本,你可以选择是否触发回调函数。

调用一个行为比如 check ,能触发元素回调,然而使用 set checked 将不触发回调的改变复选框状态。

这种差异对于区分编程更改和用户调用的状态非常重要。

例子
Console
Toggle
Check
Uncheck
Indeterminate
Determinate
Enable
Disable
Set Checked
Set Unchecked
Set Indeterminate
Set Determinate
Set Enabled
Set Disabled
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
'); } }) ; // bind events to buttons $('.callback.example .button') .on('click', function() { $('.callback .checkbox').checkbox( $(this).data('method') ); }) ;

复选框组 (Grouped Checkboxes)

不确定 状态用于对一个值处于选择和不选择之间。

这在一个复选框组中,对存在一个“主”选框,来展示其他复选框很有用。

$('.list .master.checkbox') .checkbox({ // check all children onChecked: function() { var $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; $childCheckbox.checkbox('check'); }, // uncheck all children onUnchecked: function() { var $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; $childCheckbox.checkbox('uncheck'); } }) ;
$('.list .child.checkbox') .checkbox({ // Fire on load to set parent value fireOnInit : true, // Change parent state on each child checkbox change onChange : function() { var $listGroup = $(this).closest('.list'), $parentCheckbox = $listGroup.closest('.item').children('.checkbox'), $checkbox = $listGroup.find('.checkbox'), allChecked = true, allUnchecked = true ; // check to see if all other siblings are checked or unchecked $checkbox.each(function() { if( $(this).checkbox('is checked') ) { allUnchecked = false; } else { allChecked = false; } }); // set parent checkbox state, but dont trigger its onChange callback if(allChecked) { $parentCheckbox.checkbox('set checked'); } else if(allUnchecked) { $parentCheckbox.checkbox('set unchecked'); } else { $parentCheckbox.checkbox('set indeterminate'); } } }) ;

检查条件 (Checking Conditions)

复选框 包括四个新的回调 beforeChecked, beforeUnchecked, beforeDeterminate, 和 beforeIndeterminate,当返回值为 false 将在入更新值前取消行为。

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

一次选择 (One-Way Choices)

让用户能勾选,但勾选后不能取消,可以使用 uncheckable 来设置。

用原来禁止使用复选框,使用 disabled

要使一个复选框只读不初始化它,可以包含 read-only

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

附加事件 (Attaching Events to other Elements)

复选框可以使用 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');
开关
选择
取消

初始化 (Initializing)

复选框 (Checkbox)

复选框,可以提高JavaScript初始化编程控制

全功能复选框 (Full Featured Checkboxes)

使用JavaScript的复选框将自动使复选框的标签触发输入中的变化并提供回调函数。此外,一些状态比如 不确定 只能用 Javascript 来触发。

超链标签 (Linked Labels)

如果你仅仅使用标签作为链接,可以在标签上使用 for 属性匹配上复选框的ID。

行为 (Behavior)

使用JavaScript可以访问JavaScript的行为:

$('.ui.checkbox').checkbox(behavior, 参数一, 参数二...);
toggle 从复选框当前状态切换到另一状态
check 把复选框当前状态设为选择
uncheck 把复选框当前状态设为未选择
indeterminate 作为不确定类型的复选框
determinate 从不确定设置为确定式复选框
enable 启用与复选框的交互
set checked 不使用回调把复选框当前状态设为选择
set unchecked 不使用回调把复选框当前状态设为未选择
set indeterminate 不使用回调把复选框设置为不确定式复选框
set determinate 不使用回调把不确定式复选框设置为确定式
set enabled 不使用回调启用与复选框的交互
set disabled 不使用回调禁用复选框
attach events(selector, behavior) 将复选框事件附加到另一个元素
is radio 返回元素是否是单选框
is checked 返回元素是否已经被选择
is unchecked 返回元素是否未被选择
can change 返回元素是否可以更改
should allow check 返回元素是否可被选择(检查是否已经被选择或者 `beforeChecked` 将被取消)
should allow uncheck 返回元素是否可被取消选择(检查是否已经被取消选择或者 `beforeUnchecked` 将被取消)
should allow determinate 返回元素是否可以确定(检查是否已经确定或者 `beforeDeterminate` 将被取消)
should allow indeterminate 返回元素是否可以是不确定的(检查是否已经是不确定或者 `beforeIndeterminate` 将被取消)
can uncheck 返回元素是否可以被选中

复选框

这些设置是针对复选框的,使用时确定其行为参数。

默认 描述
uncheckable auto 设置为 true/false 将决定输入框是否允许不被选择。自动(Auto)将设置只针对单选框不被允许选择。
fireOnInit false 复选框状态的回调是否在初始化和变化的时候被触发。
语境 描述
onChange HTML input element 在复选框选择或者取消选择过程中触发回调函数
onChecked HTML input element 在复选框选择的时候触发回调函数
onIndeterminate HTML input element 在复选框被设置为不确定式的时候触发回调函数
onDeterminate HTML input element 在复选框被设置为确定式的时候触发回调函数
onUnchecked HTML input element 在复选框取消选择的时候触发回调函数
beforeChecked HTML input element 在复选框选择的时候触发回调函数。回调函数返回 false 的时候可以取消。
beforeIndeterminate HTML input element 在复选框被设置为不确定式的时候触发回调函数。回调函数返回 false 的时候可以取消。
beforeDeterminate HTML input element 在复选框被设置为确定式的时候触发回调函数。回调函数返回 false 的时候可以取消。
beforeUnchecked HTML input element 在复选框取消选择的时候触发回调函数。回调函数返回 false 的时候可以取消。
onEnable HTML input element 在复选框可以被使用的时候触发回调函数
onDisable HTML input element 在复选框被禁用的时候触发回调函数

模块

这些设置是本地所有模块的,并且定义组件如何将内容绑定到DOM,以及模块的调试设置。

默认 描述
name Checkbox 日志语句中使用的名称
namespace checkbox 事件命名空间。确保模块不影响其它元素事件。
selector
selector : { input : 'input[type=checkbox], input[type=radio]', label : 'label' }
用于查找模块部分的选择器
className
className : { checked : 'checked', disabled : 'disabled', radio : 'radio', readOnly : 'read-only' }
用于确定元素状态的类名
silent False 关闭所有控制台输出,包括错误消息。
debug false 输出调试信息到控制台
performance true 显示 console.table 带有性能指标的输出
verbose false 调试输出包括所有的内部行为
errors
error : { method : 'The method you called is not defined.' }