类型
复选框
标准复选框
单选
复选框可以格式化为单选元素。这意味着它是一个独占选项。
滑块
复选框可以格式化为强调当前选择状态。
切换
复选框可以格式化为显示开或关的选择。
状态
只读
复选框可以是只读的,无法更改状态。
选中
复选框可以被选中。
不确定
复选框可以是不确定的。
禁用
复选框可以是只读的,无法更改状态。
变体
贴合
贴合的复选框不会为标签保留填充。
示例
使用回调
复选框有每个状态更改行为的两种版本,让您可以确定调用是否应触发复选框回调。
调用 check 之类的行为将触发元素的回调,但是使用 set checked 将调整复选框状态*而不会触发回调*。
这种区分对于区分程序性更改和用户调用状态更改很重要。
'); }, 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 状态可以用来表示既不是选中也不是取消选中的一种值。
这在具有“主”复选框的组中很有用,主复选框应该显示几个其他复选框的选择。
检查条件
复选框 包括四个新的回调 beforeChecked、beforeUnchecked、beforeDeterminate 和 beforeIndeterminate,从这些回调中返回 false 将在输入值更新之前取消操作。
单向选择
要使用户能够选中一个框,但不能取消选中它,请使用 uncheckable 设置。
要始终禁用复选框,请将 disabled 属性添加到您的输入中。
要使复选框为只读,请不要对其进行初始化,或者包含 read-only 类,这将不允许事件发生。
将事件附加到其他元素
复选框可以使用 attach events 行为轻松地将事件附加到其他激活元素。默认情况下,它会切换,但也可以使用其他行为。
初始化
复选框
复选框不需要 JavaScript 就能正常工作。
功能齐全的复选框
使用 JavaScript 结合复选框将自动使复选框的标签触发对输入的更改并提供回调函数。此外,一些状态(如不确定)只能通过 JavaScript 触发。
链接标签
如果您只需要标签来链接而不需要 JavaScript 复选框的任何其他功能,则可以将标签的 for 属性与输入的 id 匹配。
行为
可以使用 JavaScript 使用以下语法访问行为
| 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.' }
|
|