js 多选框&单选框

向右看齐 2023-07-07 12:57 9阅读 0赞

此多选框、单选框可以换按钮皮肤，只更改雪碧图的定位即可。  
没有使用自带的控件，是重新写的。  
用到了模块化开发，类的导出导入，类的继承。

<script type="module"> import Radio from "./js/Radio.js"; import CheckBox from "./js/CheckBox.js"; let hobby=["唱歌","跳舞","游戏机","健身","游泳","旅游","看书"]; for(let i=0;i<hobby.length;i++){ let ck=new CheckBox(hobby[i],"hobby"); ck.appendTo("body"); // if(i==3) ck.label="你好"; } let sex=["男","女","不确定"]; for(let i=0;i<sex.length;i++){ let ck=new Radio(sex[i],"sex"); ck.appendTo("body"); } </script>

// CheckBox.js
    export default class CheckBox{ 
        constructor(_label="",_name=""){ 
           /* Object.defineProperty(this,"_checked",{ writable:true, value:false }) */
            // 设置当前实例的两个属性_checked，_label，这两个属性都是可修改，但是不可枚举和删除
            Object.defineProperties(this,{ 
                _checked:{ 
                    writable:true,
                    value:false
                },
                _label:{ 
                    writable:true,
                    value:""
                }
            })
            this.elem=this.createElem();
            this.setStyle();
            this.label=_label;
            // this.elem.setAttribute("name",_name);
            this.name=_name;
        }
        createElem(){ 
            if(this.elem) return this.elem;
            let div=document.createElement("div");
            Object.assign(div.style,{ 
                height:"40px",
                position:"relative",
                float:"left"
            })
            div.addEventListener("click",e=>this.clickHandler(e));
            let ck=document.createElement("span");
            let label=document.createElement("span");
            Object.assign(ck.style,{ 
                marginRight:"5px",
                verticalAlign:"middle"
            })
            Object.assign(label.style,{ 
                marginRight:"20px"
            })
            div.appendChild(ck);
            div.appendChild(label);
            return div;
        }
        setStyle(){ 
            Object.assign(this.elem.firstElementChild.style,{ 
                width:"18px",
                height:"18px",
                display:"inline-block",
                backgroundImage:"url(./img/new_icon.png)",
                // backgroundPositionX:this.checked ? "-128px" : "-238px",
                // backgroundPositionY:this.checked ? "-126px" : "-37px"
                backgroundPositionX:this.checked ? "-175px" : "-195px" ,
                backgroundPositionY:this.checked ? "-104px": "-104px"
            });
        }
        appendTo(parent){ 
            // console.log(parent.constructor)
            // console.log(HTMLElement.prototype.isPrototypeOf(parent))
            // console.log(HTMLElement.isPrototypeOf(parent.constructor))
            if(HTMLElement.isPrototypeOf(parent.constructor)){ 
                parent.appendChild(this.elem);
            }else if(parent.constructor===String){ 
               let con=document.querySelector(parent);
                if(con) con.appendChild(this.elem);
            }
        }
        clickHandler(e){ 
            this.checked=!this.checked;
        }
    
        set checked(value){ 
            value=Boolean(value);
            this._checked=value;
           this.setStyle();     
        }
        get checked(){ 
            return this._checked;
        }
        set label(value){ 
            this._label=value;
            this.elem.lastElementChild.textContent=value;
        }
        get label(){ 
            return this._label;
        }
    
    }

// Radio.js
    import CheckBox from "./CheckBox.js";
    
    export default class Radio extends CheckBox{ 
        static list={ }
        constructor(_label="",_name=""){ 
            super(_label,_name);
        }
        appendTo(parent){ 
            // 执行超类的appendTo()方法
            super.appendTo(parent);
            if(!Radio.list[this.name])Radio.list[this.name]=[];
            Radio.list[this.name].push(this);
        }
        clickHandler(e){ 
           this.checked=true;
           Radio.list[this.name].forEach(item=>{ 
               if(item!==this) item.checked=false;
           })
        }
    }

![setter、getter][setter_getter]

[setter_getter]: https://img-blog.csdnimg.cn/20200223224947996.png