js 多选框，（切换的是背景图片）

多选框，（切换的是背景图片）

//------------多选框代码–开始--------------

 class CheckBox{
        _checked=false;
        // 构造函数,new的时候执行这个函数
        constructor(){
            this.elem=this.createCheck();
        }
        createCheck(){
            if(this.elem) return this.elem;
            let div=document.createElement("div");
            Object.assign(div.style,{
                width:"14px",
                height:"14px",
                backgroundImage:"url(./img/new_icon.png)",
                backgroundPositionX:"-238px",
                backgroundPositionY:"-37px",
                margin:"5px"
            });
            div.addEventListener("click",e=>{
                // 这里this因为使用了箭头函数,this就是箭头函数外的this指向,
                // this在这里是实例化的对象
                // this.checked=值调用了set checked()方法
                this.checked=!this.checked;
                var evt=new Event("change");
                evt.obj=this;
                evt.checked=this.checked;
                document.dispatchEvent(evt);
            });
            return div;
        }
     

        set checked(value){
            // 当新设置的值和以前的一样时,节省效率不再进入执行
            if(this._checked===value)return;
           this._checked=value;
            Object.assign(this.elem.style,{
                // value是一个布尔值
                backgroundPositionX:value ? "-128px" : "-238px",
                backgroundPositionY:value ? "-126px" : "-37px",
            });
        }
        get checked(){
            return this._checked;
        }
        // 将check这个div放在父容器中
        appendTo(parent){
            parent.appendChild(this.elem);
        }
    }


    for(var i=0;i<5;i++){
        let ck=new CheckBox();
        ck.appendTo(document.body);
    }

//------------多选框代码–结束--------------

效果：