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