Checkbox 多选框

在一组备选项中进行单选。由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。

基础用法

你可以使用原生的checkbox,也可以按照以下方法快速设置 checkbox 样式。

显示代码

禁用状态

单选框不可用的状态,可初始化时指定,也可动态设置。


显示代码

indeterminate 状态

indeterminate属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。



显示代码

可选项目数量的限制

使用minmax属性能够限制可以被勾选的项目的数量。

显示代码

按钮样式

按钮样式的单选组合。







显示代码

带有边框

按钮样式的单选组合。






显示代码

参数

你可以通过修改$.fn.checkbox.defaults来修改全局默认配置,也可以在初始化时传入指定配置$(el).checkbox({xx: xx})

参数 说明 类型 可选值 默认值
disabled 是否禁用checkbox(若 Checkbox 有disabled属性则以其为准) boolean - false
button 是否启用按钮模式 boolean - false
border 非按钮模式是否显示边框 boolean - false
size 按钮/边框模式的大小设置 string medium / small / mini ''
checked 默认选中值 boolean / array - false
min 同名多选框最少选中数,0表示无限制(若没设置checked,默认选择前几个) number - 0
max 同名多选框最多选中数,0表示无限制(若设置了checked,只选中前几个) number - 0
indeterminate 设置 indeterminate 状态,只负责样式控制 boolean - false
onchange 当绑定值变化时触发的事件 function - -

方法

你可以通过调用$(el).checkbox('xxx')来快速设置按钮状态。

方法 说明 举例
disabled 禁用checkbox $(el).checkbox('disabled')
show 取消禁用状态 $(el).checkbox('show')
set 设置checkbox选中状态(不会触发 change 事件) $(el).checkbox('set', true / false / 'checked' / 'unchecked' / 'indeterminate')