js,css模拟复选框

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