实现复选框

复选框

style

    .i_checkbox span{
        display: inline-block;
        width:16px;
        height:16px;
        border:solid 1px #d2d2d2;
        background-color:#fff;
        cursor:pointer;
    }
    .i_checkbox span:hover{
        border:solid 1px #5fb878;
    }

html

        <div class="i_checkbox">
            <span val="托班" cls="0"></span> 托班 <span val="中班" cls="0"></span> 中班  
            <span val="小班" cls="0"></span> 小班 <span val="大班" cls="0"></span> 大班
        </div>

jquery

//适合年龄绑定点击事件
$(".i_checkbox span").on("click",function(){
    let cls = $(this).attr("cls");
    if(cls==0){
        $(this).css("background-color","#7fb4e6");
        $(this).attr("cls","1");
    }else if(cls==1){
        $(this).css("background-color","#fff");
        $(this).attr("cls","0");
    }  
    let a = getFitClass(); 
    console.log(a);//获取大班的值
});

//获取适合班级值（多个逗号隔开）
function getFitClass(){
    let class_str = '';
    $(".i_checkbox span").each(function(index,element){//查询多个元素集合
        if($(this).attr("cls")==1){
            class_str += $(this).attr("val") + ',';
        }
    });
    if(!checkNull(class_str)){
        class_str = class_str.slice(0,-1);
    }
    return class_str;
}