自定义checkbox

 先上效果图：

 

html代码：

 代码粘过来太乱了影响视觉，就截个图    

 

这个就是checkbox的框，其他的就是后面的文字及盒子；其他内容可以自行更改
<span class="clause"><img src="../image/check.gif" alt=""></span>

css代码：

.clause {
    display: inline-block;
    margin-left: 3px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    border: 1px solid #dcdde1;
}
.clause img{
    width: 18px;
}
.clause:hover{
    border: 1px solid #e33770;
}

js代码：

 let checkbox = $('.checkbox');//获取大盒子

 checkbox = Array.prototype.slice.call(checkbox);//将数组的特性给checkbox

 checkbox.forEach(item => {
      $(item).click(function () {
            let className=$(item).attr('class');//获得classname
            if (className.indexOf('checked')==-1) {//检测是否含有checked，没有返回-1
                 $(item).find('.clause').css({ 'background-color': '#e33770' });
                 $(item).addClass('checked');//添加class名
            } else {
                 $(item).find('.clause').css({ 'background-color': '#fff', 'border': '1px solid #dcdde1' });
                  $(item).removeClass('checked');//移除class名
                                            }
                                        })
                                    });

如果要进行其他操作也可以获取它的class名来判断是否被选中，如有不足之处请各位指教，谢谢