js,css模拟复选框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32279193/article/details/78257737

js,css模拟复选框

效果图

html

<span class="rem_name ">
    <input name="rem_name" type="checkbox" value="1">
</span>

css

.signBox .forgetPas .rem_name {
    vertical-align: middle;
    display: inline-block;
    background-image: url(../images/styleimg/login3.png?2016120901);
    background-position: -50px -295px;
    background-repeat: no-repeat;
}

.signBox .forgetPas .onchecked {
    background-image: url(../images/styleimg/login3.png?2016120901);
    background-position: -50px -268px;
}

javascript

(function(){
    if ($('[name="rem_name"]:checked')==1){
        $('.signBox .rem_name').addClass('onchecked');
    };
    $('[name="rem_name"]').on('click',function(){
        if ($('[name="rem_name"]:checked').length==1){
            $('.signBox .rem_name').addClass('onchecked');
        }else{
            $('.signBox .rem_name').removeClass('onchecked');
        };
    });
})();

img