JS如何实现多选框

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

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

描述：

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

效果：

实现：

Utile.js

(function(){
Object.prototype.addProto=function(sourceObj){
varnames=Object.getOwnPropertyNames(sourceObj);
for(vari=0;i<names.length;i++){
vardesc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);
if(typeofdesc.value==="object"&&desc.value!==null){
varobj=newdesc.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);
}
returnthis;
};
Function.prototype.extendClass=function(supClass){
functionF(){}
F.prototype=supClass.prototype;
this.prototype=newF();
this.prototype.constructor=this;
this.supClass=supClass.prototype;
if(supClass.prototype.constructor===Object.prototype.constructor){
supClass.prototype.constructor=supClass;
}
}
})();
varRES=(function(){
varlist={};
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){
varxhr=newXMLHttpRequest();
xhr.addEventListener("load",RES.loadHandler);
xhr.open("GET",path);
xhr.send();
},
loadHandler:function(e){
this.removeEventListener("load",RES.loadHandler);
varkey,obj;
if(RES.type==="json"){
obj=JSON.parse(this.response);
key=obj.meta.image.split(".png")[0];
list[key]=obj.frames;
}elseif(RES.type==="xml"){
obj=this.responseXML.children[0];
key=obj.getAttribute("imagePath").split(".png")[0];
list[key]=obj;
}

if(RES.imgDataList.length===0){
varevt=newEvent(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){
varfileName=RES.basePath;
for(varkeyinlist){
vararr=list[key].filter(function(t){
returnt.filename===name;
});
if(arr.length>0){
fileName+=key+".png";
break;
}
}
if(arr.length===0){
returnfalse;
}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){
varfileName=RES.basePath;
for(varkeyinlist){
varelem=list[key].querySelector("[n="+name+"]");
if(elem){
fileName+=list[key].getAttribute("imagePath");
break;
}
}
if(!elem)returnfalse;
return{
file:fileName,
w:elem.getAttribute("w"),
h:elem.getAttribute("h"),
x:elem.getAttribute("x"),
y:elem.getAttribute("y")
}
},
getImage:function(name){
varobj;
if(RES.type==="json"){
obj=RES.getNameJSONData(name);
}elseif(RES.type==="xml"){
obj=RES.getNameXMLData(name)
}
if(!obj)return;
vardiv=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"
});
returndiv;
},
changeImg:function(elem,name){
varobj;
if(RES.type==="json"){
obj=RES.getNameJSONData(name);
}elseif(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

varCheckBox=(function(){
functionCheckBox(parent){
this.checkView=this.init(parent);
}
/*
//ES5单例
CheckBox.getInstance=function(){
if(!CheckBox._instance){
CheckBox._instance=newCheckBox();
}
returnCheckBox._instance;
};*/
CheckBox.prototype.addProto({
_label:"",
_checked:false,
init:function(parent){
if(this.checkView)returnthis.checkView;
vardiv=document.createElement("div");
varicon=RES.getImage("f-checkbox");
div.appendChild(icon);
varlabel=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"
});
varh=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);
returndiv;
},
clickHandler:function(e){
this.checked=!this.checked;
},
setlabel(value){
this._label=value;
this.checkView.lastElementChild.textContent=value;
},
getlabel(){
returnthis._label;
},
setchecked(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){
varevt=newEvent("change");
evt.checked=value;
evt.elem=this;
document.dispatchEvent(evt);
},
getchecked(){
returnthis._checked;
}
});
returnCheckBox;
})();

varRadio=(function(){
functionRadio(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;
varlist=document.querySelectorAll("[groupName="+this.groupName+"]");
for(vari=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);
}
});
returnRadio;
})();

html

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<scriptsrc="js/Utile.js"></script>
<scriptsrc="js/UIComponent.js"></script>
</head>
<body>
<script>
document.addEventListener(RES.DATA_FINISH_EVENT,init);
RES.init(["new_icon"],"img/","xml");

functioninit(){
varelem=document.createDocumentFragment();
document.addEventListener("change",changeHandler);
varcheck=newCheckBox(elem);
check.checked=true;
check.label="男";
varcheck1=newCheckBox(elem);
check1.label="女";
document.body.appendChild(elem);

}

functionchangeHandler(e){
console.log(e);
}


</script>
</body>
</html>

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