Checkbox 多选框
在一组备选项中进行单选。由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
基础用法
你可以使用原生的checkbox,也可以按照以下方法快速设置 checkbox 样式。
▼显示代码
禁用状态
单选框不可用的状态,可初始化时指定,也可动态设置。
▼显示代码
indeterminate 状态
indeterminate
属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。
▼显示代码
可选项目数量的限制
使用min
和max
属性能够限制可以被勾选的项目的数量。
▼显示代码
按钮样式
按钮样式的单选组合。
▼显示代码
带有边框
按钮样式的单选组合。
▼显示代码
参数
你可以通过修改$.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') |