js,css模拟复选框

最新推荐文章于 2021-10-11 11:11:04 发布

原创最新推荐文章于 2021-10-11 11:11:04 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #复选框

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

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');
        };
    });
})();