Menu

Checkbox
Checkbox允许用户从一组选项(通常是二进制选项)中选择一个值

下载

Types

Checkbox

一个标准的Checkbox

Radio

Checkbox可以被格式化为单选元素. 这意味着它是一个排他性的选项.

Slider

可以将Checkbox格式化为强调当前选择状态

Toggle

Checkbox可以格式化为显示开或关选项

States

只读

Checkbox可以是只读的,不能改变状态

Checked

可以勾选Checkbox

不确定的

Checkbox可以是不确定的

不确定状态只能在Javascript中设置,参见示例部分

禁用

Checkbox可以是只读的,不能改变状态

可以通过在隐藏输入或类上设置禁用属性来禁用Checkbox 禁用 on the uiCheckbox


变化

Fitted

一个合适的Checkbox不会为标签留下填充

例子

使用回调函数

Checkbox的每个状态改变行为有两个版本,让您确定调用是否应该触发Checkbox回调.

将类似于 check 将触发一个元素回调,然而使用 设置检查 将调整Checkbox状态 在不触发回调

这种区别对于区分程序性更改非常重要, 以及用户调用的状态更改.

Example
Console
Toggle
Check
Uncheck
不确定的
Enable
Disable
设置检查
设置不
将不确定的
设置定
设置启用
设置禁用
var 控制台美元= $ ('.回调 .控制台”) ; $('.回调.example .Checkbox”) .Checkbox() .first().Checkbox({ oncheck:函数(){ 美元的控制台.追加(“oncheck调用
'); }, onUnchecked:函数(){ 美元的控制台.附加(“onUnchecked称
'); }, onEnable:函数(){ 美元的控制台.附加(“onEnable称
'); }, onDisable:函数(){ 美元的控制台.附加(“onDisable称
'); }, on定:函数(){ 美元的控制台.附加(“on定称
'); }, on不确定的:函数(){ 美元的控制台.附加(“on不确定的称
'); }, onChange:函数(){ 美元的控制台.追加(“onChange
'); } }) ; //绑定事件到按钮 $('.回调.example .按钮”) .(“点击”,函数(){ $('.回调 .Checkbox”).Checkbox($ ().数据(“法”)); }) ;

分组Checkbox

The 不确定的 状态可用于表示既未选中也未选中的值.

这对于有“主”Checkbox的组很有用, 应该显示几个其他Checkbox的选择

$('.list .master.Checkbox”) .Checkbox({ //检查所有的子节点 oncheck:函数(){ var childCheckbox =(美元).最近的(“.Checkbox”).兄弟姐妹('.list').find('.Checkbox”) ; childCheckbox美元.Checkbox('检查'); }, //取消选中所有子节点 onUnchecked:函数(){ var childCheckbox =(美元).最近的(“.Checkbox”).兄弟姐妹('.list').find('.Checkbox”) ; childCheckbox美元.Checkbox('取消'); } }) ;
$('.list .child.Checkbox”) .Checkbox({ //在加载时启动以设置父值 fireOnInit:没错, //更改每个子Checkbox的父状态 onChange:函数(){ var listGroup美元 = $( 这一点).最近的(“.list'), parentCheckbox = listGroup美元.最近的(“.item').孩子('.Checkbox”), 美元的Checkbox = $ listGroup.find('.Checkbox”), allChecked = true, allUnchecked = true ; //检查是否所有其他兄弟姐妹被选中或未选中 美元的Checkbox.每个(函数(){ 如果($ ().Checkbox('已选中')){ allUnchecked = false; } else { allChecked = false; } }); //设置父Checkbox状态,但不触发它的onChange回调 如果(allChecked) { parentCheckbox美元.Checkbox(“设置检查”); } else if (allUnchecked) { parentCheckbox美元.Checkbox(不设置); } else { parentCheckbox美元.Checkbox(“设置不定”); } } }) ;

检查条件

Checkbox 包括四个新的回调 beforeChecked, beforeUnchecked, before定, and before不确定的,返回 false 这些回调将取消在输入值更新之前发生的操作.

$('.cancel.example .ui.Checkbox”) .Checkbox({ beforeChecked:函数(){ var luckyPerson =(数学.random() < 0.5) ; 返回luckyPerson; } }) ;

单向的选择

要使用户能够选中Checkbox,但不能取消选中,请使用 uncheckable setting.

若要始终禁用Checkbox,请添加该属性 禁用 你的输入.

若要使Checkbox为只读,请不要初始化它或包含 只读 类,该类不允许发生事件.

$('.state.example .Checkbox”) .last() .Checkbox({ uncheckable:假 }) ;

将事件附加到其他元素

Checkbox可以使用 附加事件 将事件轻松地附加到其他激活元素的行为. 这默认为切换,但也可以使用其他行为.

$('.test.Checkbox”).Checkbox(“附加事件”、“.toggle.按钮”); $('.test.Checkbox”).Checkbox(“附加事件”、“.check.按钮”、“检查”); $('.test.Checkbox”).Checkbox(“附加事件”、“.uncheck.”、“取消”按钮);
Toggle
Check
Uncheck

初始化

Checkbox

Checkbox不需要Javascript来发挥作用.

全功能Checkbox

使用带有Checkbox的Javascript将自动使Checkbox的标签在输入中触发更改并提供回调函数. 此外,一些州像 不确定的 只能用Javascript触发.

链接的标签

如果你只需要标签来链接,而不需要JavascriptCheckbox的任何其他功能, 你可以匹配 for 属性的标签到输入的id.

行为

Javascript使用以下语法访问行为:

$('.ui.Checkbox”).Checkbox(行为、argumentOne argumentTwo...);
toggle 从当前状态切换Checkbox
check 将Checkbox状态设置为已选中
uncheck 将Checkbox状态设置为未选中
不确定的 设置为不确定Checkbox
设置为确定Checkbox
enable 启用与Checkbox的交互
设置检查 设置一个没有回调的Checkbox状态为已检查
设置不 将Checkbox状态设置为未检查且没有回调
将不确定的 设置为不带回调的不确定Checkbox
设置定 设置为不带回调的确定Checkbox
设置启用 启用不带回调的Checkbox交互
设置禁用 禁用不带回调的Checkbox交互
附加事件(选择器、行为) 将Checkbox事件附加到另一个元素
是收音机 返回元素是否为单选
检查 返回当前是否检查元素
是不 返回元素是否未被检查
可以改变 返回元素是否能够被更改
应该允许检查 返回是否可以检查元素(检查是否已经检查或' beforeChecked '将取消)
应该允许取消 返回元素是否可以未选中(检查是否已经未选中或' beforeUnchecked '将取消)
应该允许决定性 返回元素是否可以确定(检查是否已经确定或' before定 '将取消)
应该允许不确定的 返回元素是否可以不确定(检查是否已经不确定或' before不确定的 '将取消)
可以不选 返回元素是否可以不选中

Checkbox

这些设置是特定于Checkbox的,并决定其行为的参数

Default 描述
uncheckable auto 设置为true/false将决定一个输入是否不允许选择. Auto将只对单选框设置为不允许此行为
fireOnInit false 检查状态的回调是否应该在init和change上触发
Context 描述
onChange HTML输入元素 Checkbox之后的回调要么被选中,要么未选中.
oncheck HTML输入元素 选中Checkbox后的回调.
on不确定的 HTML输入元素 Checkbox后的回调被设置为不确定.
on定 HTML输入元素 Checkbox后的回调被设置为确定.
onUnchecked HTML输入元素 Checkbox之后的回调是未选中的.
beforeChecked HTML输入元素 选中Checkbox之前的回调. 可以通过返回取消更改吗 false
before不确定的 HTML输入元素 Checkbox前的回调被设置为不确定. 可以通过返回取消更改吗 false
before定 HTML输入元素 Checkbox前的回调被设置为确定. 可以通过返回取消更改吗 false
beforeUnchecked HTML输入元素 未选中Checkbox前的回调. 可以通过返回取消更改吗 false
onEnable HTML输入元素 启用Checkbox后的回调.
onDisable HTML输入元素 禁用Checkbox后的回调.

Module

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

Default 描述
name Checkbox 日志语句中使用的名称
名称空间 Checkbox 事件名称空间. 确保模块拆卸不会影响附加到元素的其他事件.
选择器
选择器:{ 输入:' Input [type=Checkbox], Input [type=radio]', 标签:“标签” }
用于查找模块部件的选择器
类名称
名称:{ 检查:“检查”, 禁用:“禁用”, 广播:“广播”, 只读的:“只读” }
用于确定元素状态的类名
silent False 关闭所有控制台输出,包括错误消息,而不考虑其他调试设置.
debug false 调试输出到控制台
性能 true Show console.table 具有性能指标的输出
verbose false 调试输出包括所有的内部行为
errors
错误:{ 方法:'你调用的方法没有定义.' }

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9