JS如何实现多选框

小编给大家分享一下JS如何实现多选框，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

本文实例为大家分享了JS面向对象之多选框实现代码，供大家参考，具体内容如下

描述：

JS面向对象——多选框的实现

效果：

实现：

Utile.js

(function () {   Object.prototype.addProto=function (sourceObj) {     var names=Object.getOwnPropertyNames(sourceObj);     for(var i=0;i<names.length;i++){       var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);       if(typeof desc.value==="object" && desc.value!==null){         var obj=new desc.value.constructor();         obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值         Object.defineProperty(this,names[i],{           enumerable:desc.enumerable,           writable:desc.writable,           configurable:desc.configurable,           value:obj         });         continue;       }       Object.defineProperty(this,names[i],desc);     }     return this;   };   Function.prototype.extendClass=function (supClass) {     function F() {}     F.prototype=supClass.prototype;     this.prototype=new F();     this.prototype.constructor=this;     this.supClass=supClass.prototype;     if(supClass.prototype.constructor===Object.prototype.constructor){       supClass.prototype.constructor=supClass;     }   } })(); var RES=(function () {   var list={};   return {     DATA_FINISH_EVENT:"data_finish_event",     init:function (imgDataList,basePath,type) {       if(imgDataList.length===0) return;       if(!type) type="json";       RES.imgDataList=imgDataList.reverse();       RES.basePath=basePath;       RES.type=type;       RES.ajax(basePath+imgDataList.pop()+"."+type)     },     ajax:function (path) {       var xhr=new XMLHttpRequest();       xhr.addEventListener("load",RES.loadHandler);       xhr.open("GET",path);       xhr.send();     },     loadHandler:function (e) {       this.removeEventListener("load",RES.loadHandler);       var key,obj;       if(RES.type==="json"){         obj=JSON.parse(this.response);         key=obj.meta.image.split(".png")[0];         list[key]=obj.frames;       }else if(RES.type==="xml"){         obj=this.responseXML.children[0];         key=obj.getAttribute("imagePath").split(".png")[0];         list[key]=obj;       }         if(RES.imgDataList.length===0){         var evt=new Event(RES.DATA_FINISH_EVENT);         evt.list=list;         document.dispatchEvent(evt);         // Model.instance.menuData=list;         return;       }       RES.ajax(RES.basePath+RES.imgDataList.pop()+"."+RES.type);     },     getNameJSONData:function (name) {       var fileName=RES.basePath;       for(var key in list){         var arr=list[key].filter(function (t) {           return t.filename===name;         });         if(arr.length>0){           fileName+=key+".png";           break;         }       }       if(arr.length===0){         return false;       }else{         return {           file:fileName,           w:arr[0].frame.w,           h:arr[0].frame.h,           x:arr[0].frame.x,           y:arr[0].frame.y         };       }     },     getNameXMLData:function (name) {       var fileName=RES.basePath;       for(var key in list){         var elem=list[key].querySelector("[n="+name+"]");         if(elem){           fileName+=list[key].getAttribute("imagePath");           break;         }       }       if(!elem) return false;       return {         file:fileName,         w:elem.getAttribute("w"),         h:elem.getAttribute("h"),         x:elem.getAttribute("x"),         y:elem.getAttribute("y")       }     },     getImage:function (name) {       var obj;       if(RES.type==="json"){         obj=RES.getNameJSONData(name);       }else if(RES.type==="xml"){         obj=RES.getNameXMLData(name)       }       if(!obj)return;       var div=document.createElement("div");       Object.assign(div.style,{         width:obj.w+"px",         height:obj.h+"px",         backgroundImage:"url("+obj.file+")",         backgroundPositionX:-obj.x+"px",         backgroundPositionY:-obj.y+"px",         position:"absolute"       });       return div;     },     changeImg:function (elem,name) {       var obj;       if(RES.type==="json"){         obj=RES.getNameJSONData(name);       }else if(RES.type==="xml"){         obj=RES.getNameXMLData(name)       }       if(!obj)return;       Object.assign(elem.style,{         width:obj.w+"px",         height:obj.h+"px",         backgroundImage:"url("+obj.file+")",         backgroundPositionX:-obj.x+"px",         backgroundPositionY:-obj.y+"px",         position:"absolute"       });     }   } })();

UIComponent.js

var CheckBox=(function () {   function CheckBox(parent) {     this.checkView=this.init(parent);   }   /*    //ES5 单例   CheckBox.getInstance=function () {     if(!CheckBox._instance){       CheckBox._instance=new CheckBox();     }     return CheckBox._instance;   };*/   CheckBox.prototype.addProto({     _label:"",     _checked:false,     init:function (parent) {       if(this.checkView) return this.checkView;       var div=document.createElement("div");       var icon=RES.getImage("f-checkbox");       div.appendChild(icon);       var label=document.createElement("span");       div.style.position=icon.style.position=label.style.position="relative";       icon.style.float=label.style.float="left";       label.textContent="";       Object.assign(label.style,{         fontSize:"16px",         lineHeight:"20px",         marginLeft:"5px",         marginRight:"10px"       });       var h=RES.getNameXMLData("f-checkbox").h;       icon.style.top=(20-h)/2+"px";       div.appendChild(label);       parent.appendChild(div);       this.clickHandlerBind=this.clickHandler.bind(this);       div.addEventListener("click",this.clickHandlerBind);       return div;     },     clickHandler:function (e) {       this.checked=!this.checked;     },     set label(value){       this._label=value;       this.checkView.lastElementChild.textContent=value;     },     get label(){       return this._label;     },     set checked(value){       if(this._checked===value)return;       this._checked=value;       if(value){         RES.changeImg(this.checkView.firstElementChild,"f-checkbox-active");       }else{         RES.changeImg(this.checkView.firstElementChild,"f-checkbox");       }       this.checkView.firstElementChild.style.position="relative";       this.dispatchMessage(value);     },     dispatchMessage:function (value) {       var evt=new Event("change");       evt.checked=value;       evt.elem=this;       document.dispatchEvent(evt);     },     get checked(){       return this._checked;     }   });   return CheckBox; })();   var Radio=(function () {   function Radio(parent,groupName) {     this.constructor.supClass.constructor.call(this,parent);     this.groupName=groupName;     this.checkView.self=this;     this.checkView.setAttribute("groupName",groupName);   }     Radio.extendClass(CheckBox);     Radio.prototype.addProto({     clickHandler:function (e) {       // console.log(Model.instance.menuData);       if(this.checked)return;       var list=document.querySelectorAll("[groupName="+this.groupName+"]");       for(var i=0;i<list.length;i++){         list[i].self.checked=false;       }       this.checked=true;     },     dispatchMessage:function (value) {       if(!value)return;       this.constructor.supClass.dispatchMessage.call(this,value);     }   });   return Radio; })();

html

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Title</title>   <script src="js/Utile.js"></script>   <script src="js/UIComponent.js"></script> </head> <body>   <script>     document.addEventListener(RES.DATA_FINISH_EVENT,init);     RES.init(["new_icon"],"img/","xml");       function init() {       var elem=document.createDocumentFragment();       document.addEventListener("change",changeHandler);       var check=new CheckBox(elem);       check.checked=true;       check.label="男";       var check1=new CheckBox(elem);       check1.label="女";       document.body.appendChild(elem);       }       function changeHandler(e) {       console.log(e);     }       </script> </body> </html>

看完了这篇文章，相信你对“JS如何实现多选框”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！