基于Bootstrap3的Checkbox元素美化jQuery插件
简要教程
Simple-bt-checks是一款基于Bootstrap3的Checkbox元素美化jQuery插件。通过该插件可以轻松的制作各种尺寸、颜色的复选框按钮，并且可以自定义复选框选中时的图标，以及完全自定义复选框的样式。
查看演示 下载插件
使用方法
复选框的尺寸
要使用不同尺寸的复选框，可以使用下面的HTML结构来生成复选框。
<p id="sizes-x"> <span class="checkbox" style="display: inline"> <label> <input type="checkbox"></label> </span> <span class="checkbox" style="display: inline"> <label> <input type="checkbox" value="x" checked=""></label> </span> </p>
然后使用下面的jQuery代码来初始化，在size参数中设置不同的尺寸。
$('#sizes-1 input[type="checkbox"]').simpleBtChecks();//默认尺寸 $('#sizes-2 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); $('#sizes-3 input[type="checkbox"]').simpleBtChecks({ size: "x-3" }); 复选框的颜色
可以通过class参数来设置不同的复选框颜色。
$('.color_1 input[type="checkbox"]').simpleBtChecks({ size: "x-2" }); // default bt class: 'btn btn-default' $('.color_2 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-primary' }); $('.color_3 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-success' }); $('.color_4 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-info' }); $('.color_5 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-warning' }); $('.color_6 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-danger' }); $('.color_7 input[type="checkbox"]').simpleBtChecks({ size: 'x-2', class : 'btn btn-link' }); 回调事件
该复选框美化插件有3个可用的回调函数：
- onLoadSbtc：为每一个input都插件一个node节点。
- beforeChange：在复选框状态改变之前触发，返回一个布尔值和一个nodeElement元素。
- afterChange：在复选框状态改变之后触发，返回一个布尔值和一个nodeElement元素。
自定义图标
复选框选中状态的图标是可以自定义的，通过icon参数来自定义图标，例如下面的代码：
$('input[type="checkbox"]').simpleBtChecks ({ size: "default", class: "btn btn-default", icon : "glyphicon glyphicon-heart-empty" }); Simple-bt-checks复选框美化插件的github地址为： https://github.com/joelthorner/Simple-bt-checks
来源：jQuery之家
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
