小对勾需要引入awesome插件。
css部分:
.bella-checkbox{
position: relative;}/** 将初始的checkbox的样式改变 */.bella-checkbox input[type="checkbox"] { opacity: 0; /*将初始的checkbox隐藏起来*/}/** 设计新的checkbox,位置 */
.bella-checkbox label:before { content: ''; width: 18px; height: 18px; display: inline-block; border-radius: 2px; border: 1px solid #bbb; background: #fff;}/** 点击初始的checkbox,将新的checkbox关联起来 */
.bella-checkbox input[type="checkbox"]:checked + label:after { display: inline-block; font-family: 'FontAwesome'; content: "\f00c"; top: 1px; left: 0px; position: absolute; font-size: 10px; line-height: 1.7; width: 18px; height: 18px; color: #fff; background: #2b94e5; border-radius: 2px;}.bella-checkbox label {
cursor: pointer; text-align: center; position: absolute; top: 4px; left: 10px;}列表部分:
配置列表当中
onPostBody:function(){ //设置复选框的样式,参数id onPostBody('apFnodeList'); },js部分:
function onPostBody(eleId){
//改变复选框样式 $('#'+eleId).find("input:checkbox").each(function (i) { var $check = $(this); if ($check.attr("id") && $check.next("label")) { return; } var name = $(this).attr('id') + $check.attr("name"); var id = name + "-" + i; var $label = $('<label for="'+ id +''+eleId+'"></label>'); $check.attr("id", id+eleId).parent().addClass("bella-checkbox").append($label); });}样式如下图: