html制作复选框,html自定义复选框

自定义复选框的素材：

icon-check-circle.png

icon-checked.png

checkbox.html(为了方便起见，这里使用到了jQuery)

自定义复选框checkbox

.checkbox {

cursor: pointer;

padding-left: 25px;

color: #000;

display: inline-block;

height: 18px;

line-height: 18px;

}

.cb-default {

background: url(icon-check-circle.png) left top no-repeat;

}

.cb-checked {

background: url(icon-checked.png) left top no-repeat;

}

Remember me

$('.checkbox').on('click', function() {

if($(this).hasClass('cb-default')) {

$(this).removeClass('cb-default').addClass('cb-checked');

} else {

$(this).removeClass('cb-checked').addClass('cb-default');

}

});

效果图如下：

未选中状态

选中状态

为提交表单时，考虑将复选框的内容进行提交，对上述的自定义复选框进行了如下改进：

自定义复选框checkbox

.checkbox {

cursor: pointer;

color: #000;

display: inline-block;

}

.checkbox span {

display: inline-block;

height: 18px;

line-height: 18px;

padding-left: 25px;

}

.cb-default {

background: url(icon-check-circle.png) left top no-repeat;

}

.cb-checked {

background: url(icon-checked.png) left top no-repeat;

}

Remember me

$('.checkbox').on('click', function() {

$span = $('.checkbox span');

var input = $('.checkbox input')[0];

if($span.hasClass('cb-default')) {

$span.removeClass('cb-default').addClass('cb-checked');

input.setAttribute('value', 1);

} else {

$span.removeClass('cb-checked').addClass('cb-default');

input.setAttribute('value', 0);

}

});

运行效果与之前的一致，不同的是加入的隐藏input，用于表单提交时提交数据，当提交的value为1时，表示复选框已被选中；当提交的value为0时，表示复选框未被选中。