13518219792
小编给大家分享一下JS如何实现多选框，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联建站是一家集网站建设,泊头企业网站建设,泊头品牌网站建设,网站定制,泊头网站建设报价,网络营销,网络优化,泊头网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
本文实例为大家分享了JS面向对象之多选框实现代码，供大家参考，具体内容如下
描述：
JS面向对象——多选框的实现
效果：
实现：
Utile.js
(function () {
Object.prototype.addProto=function (sourceObj) {
var names=Object.getOwnPropertyNames(sourceObj);
for(var i=0;i0){
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;ihtml
Title