小編給大家分享一下JS如何實(shí)現(xiàn)多選框，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),泊頭企業(yè)網(wǎng)站建設(shè),泊頭品牌網(wǎng)站建設(shè),網(wǎng)站定制,泊頭網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,泊頭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

本文實(shí)例為大家分享了JS面向?qū)ο笾噙x框?qū)崿F(xiàn)代碼，供大家參考，具體內(nèi)容如下

描述：

JS面向?qū)ο蟆噙x框的實(shí)現(xiàn)

效果：

實(shí)現(xiàn)：

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;i
html



  
  
  
  


  

看完了這篇文章，相信你對(duì)“JS如何實(shí)現(xiàn)多選框”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
            
            
                        

            網(wǎng)站標(biāo)題：JS如何實(shí)現(xiàn)多選框            

            URL網(wǎng)址：http://weahome.cn/article/jeejph.html