笔记19原生js实现单/多选框组件

原生js-封装一个单选/多选框

html部分

  < div id=’jsCheckGroup’>
      < div id=’checkgroup radius’>
          < div data-val = ‘a’ class =’item’> 选项A < /div>
          < div data-val = ‘b’ class =’item’> 选项B < /div>
          < div data-val = ‘c’ class =’item’> 选项C < /div>
          < div data-val = ‘d’ class =’item’> 选项D < /div>
      < /div>
  < /div>  

css部分

 .checkgroup .item {
    height: 42px
    line-height: 42px
    padding: 0 10px
    margin: 10px 0
    border: 1px solid #c7c7c7
    border-radius: 6px}
.checkgroup.radius .item{
    boder-radius:21px}
.checkoutgroup .item.selected{
    border:1px solid #08b292
    background: #08b292
    color: #ffffff}

js部分

    < script type=’text/javascript’ src= ‘../js/1.js’> < /script>
    < script type=’text/javascript’ >
       var option = [
           {text:’a’, value:’选项一’},
           {text:’b’, value:’选项二’},
           {text:’c’, value:’选项三’},
           {text:’d’, value:’选项四’},
       ]
       function CheckGroup (renderTo,options,isMultiple){  //声明一个选择框的构造函数
        //参数： renderTo用于获取Dom节点、 options赋予初始数据，
        //isMultiple为true代表实现多选框
          var that = this;
          that.renderTo = renderTo
          that.options = options
          that.isMultiple = !! isMultiple //保存当前执行上下文
          that.initHtml()  //初始化当前页面
          that.initEvent() //初始化当前事件
       }
       CheckGroup.prototype.initHtml = fInitHtml;      //将全局作用域中的方法封装到构造函数的原型上
       CheckGroup.prototype.initEvent = fInitEvent;
       CheckGroup.prototype.toggleEl = fToggleEl;      //处理当前点击选中的元素
       CheckGroup.prototype.isSelected = fIsSelected;  //判断当前元素是否被选中
       CheckGroup.prototype.val = fVal;                //提供一个供用户输入所选则元素的对外接口
       function fInitHtml(){
            //初始化页面
         var that = this,
             sHtml = ‘’
         that.renderTo.innerHtml += sHtml
         // 获取选择框的元素引用,方法封装在当前上下文中
         that.el = null
         that.el = document.getElementById(‘jsCheckGroup’)
       }
       function fInitEvent(){
        //初始化事件
        var that = this;
        that.el && that.el.addEventListener(‘click’,function(event){
            var item = event.target   // 获取点击事件
            item.classList.contain(‘item’) && that.toggleEl(item) //执行原型上的toggleEl方法
        })
       }
       function fToggleEl(){
         //处理当前点击选中的元素
         var that = this
         if(that.isSelected (item,that.active)){
                 //判断当前处理的点击事件元素是否已选中，是的话清除样式、更新选中数组
              item.classList.remove(‘selected’)
              that.active.forEach((e,i)=>{
                  if(e === item.getAttribute(‘data-val’)){
                      that.active.splice(i,1)
                  }
              })
         } else if( that.isMultiple ){
                 //若未选中，且当前实例由‘多选框’构造，直接添加样式、更新选中数组
                 item.classList.add(‘selected’)
                 that.active.push(item.getAttribute(‘data-val’))
         } else {
                 //若未选中，且当前实例由‘单选框’构造,先清除其余样式，再添加、并更新选中数组
                 document.querySelectorAll(‘#jsCheckGroup .item’).forEach(E=>{
                  E.classList.remove(‘selected’)
                 })
                 item.classList.add(‘selected’)
                 that.active=[]
                 that.active.push(item.getAttribute(‘data-val’))
         }
       }
       function fIsSelected(item,arr){
         //判断当前元素是否被选中
         if(arr.indexOf(item.getAttribute(‘data-val’))!==-1){
               return true
         }
         else {
             return false
         }
       }
       function fVal( values ){
       //提供一个供用户输入所选则元素的对外接口,根据用户输入改变当前选中
       var that = this
       //当前若是多选框，只接受第一个数据
       !that.isMultiple && values.length>-1 && (values.length = 1)
       let currentActive = []
       document.querySelectorAll(‘.item’)
       let currentArr = []
       all.forEach(e=>{
          if(values.indexOf(e.getAttribute(‘data-val’))!==-1){
              e.classList.add(‘selected’)
              currentActive.push(e.getAttribute(‘data-val’))
          }
       })
       that.active = currentActive // 在that作用域上进行封装当前的选中数组
       }
    < /script>