JavaScript中怎么實現多選框

JavaScript中怎么實現多選框，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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 p=document.createElement("p");      Object.assign(p.style,{        width:obj.w+"px",        height:obj.h+"px",        backgroundImage:"url("+obj.file+")",        backgroundPositionX:-obj.x+"px",        backgroundPositionY:-obj.y+"px",        position:"absolute"      });      return p;    },    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 p=document.createElement("p");      var icon=RES.getImage("f-checkbox");      p.appendChild(icon);      var label=document.createElement("span");      p.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";      p.appendChild(label);      parent.appendChild(p);      this.clickHandlerBind=this.clickHandler.bind(this);      p.addEventListener("click",this.clickHandlerBind);      return p;    },    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>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。