通用复选框

1. 渲染复选框

select = 
  `
     <div style="display: inline-block;" class="dictionary_check_box multipleChoiceBox">
       <label>${this._dictionaryCheck[i]}：</label>
       <div style="position: relative;float: right;" class="_productTypeBox">
         <div style="position: relative;width: 120px;" class="_inputBox">
           <i class="icon-input" 
             style="background: url(assets/images/oa/下拉.png) no-repeat;position: absolute;
               right: 9px;top: 10px;width: 10px;height: 10px;background-size: contain;"
           >
           </i>
           <input name='${_label[0]}' id="_dictionaryCheck${i}" 
             class="_selectInfo form-control input-sm input-v5" style="background: #fff;width: 120px;"
             type="text" value="" title="" readonly autocomplete="off"
             placeholder='请选择${this._dictionaryCheck[i]}'
           />
         </div>
         <div class="_pickProType dropdown-menu wkt-scroll"
           style="padding: 5px 10px;max-height: 200px;overflow-y: auto;min-width: 120px;"
         >
           <ul></ul>
         </div>
       </div>
     </div>
   `
 //获取复选框所有元素
 this.getCheckData() 

2. 渲染复选框内所有元素

	//获取Dictionary复选框数据
    getCheckData: async function () {
      const res = await request(
        url,
        query: {},
        cacheBust: true
      )
      let { getMe, say } = res.data
      if (say.errMsg == '' && say.statusCode == '0000') {
        getMe.forEach(function (item) {
          item = item.replace(/[^0-9]/gi, "");
        });
        getMe.sort(compare());

        function compare() {
          return function (a, b) {
            var value1 = a.split(" ")[0];
            var value2 = b.split(" ")[0];
            return value1 - value2;
          };
        }
        getMe = Array.from(new Set(getMe));
        let content = `
          <li class="inputS single" style="white-space: nowrap;display: flex;align-items: center;">
            <input type="checkbox" style="margin-top:0px;" eleName="全选">
            <label for="checkAll"><span title="全选">全选</span></label>
          </li> `
        for (let j = 0; j < getMe.length; j++) {
          if (getMe[j].trim() == "") {
            getMe.splice(j, 1);
          } else {
            content += 
            	`
	              <li 
	                class="inputS single" 
	                style="white-space: nowrap;display: flex;align-items: center;"
	              >
	                <input type="checkbox" style="margin-top:0px;" eleName="${getMe[j]}">
	                <label for="${getMe[j]}"><span title="${getMe[j]}">${getMe[j]}</span></label>
	              </li>
              	`
          }
        }
        this.$el.find('.dictionary_check_box ._pickProType ul').eq(i).append(content)
      } else {
        msgUtils.warning(`获取${this._dictionaryCheck[i]}失败!`)
      }
    },

3. 绑定复选框的一些相关事件

	//显示复选框
    showMultiselectBox: function (e) {
      e.stopPropagation();
      let that = this;
      let hideBoxNum = that.$el.find("._pickProType").length;
      for (let i = 0; i < hideBoxNum; i++) {
        that.$el.find("._pickProType").eq(i).hide();
      }
      $(e.currentTarget).parent().find("._pickProType").show();
    },
    //隐藏复选框
    hideMultiselectBox: function (e) {
      let that = this;
      let hideBoxNum = that.$el.find("._pickProType").length;
      for (let i = 0; i < hideBoxNum; i++) {
        let pop = $("._pickProType").eq(i);
        if (!pop.is(e.target) && pop.has(e.target).length === 0) {
          that.$el.find("._pickProType").eq(i).hide();
        }
      }
    },
    //复选框勾选事件
    checkMultiselect: function (e) {
      e.stopPropagation()
      const nowEleName = $(e.currentTarget).attr("eleName");
      const checkStatus = !!$(e.currentTarget).prop("checked");
      const $Content = $(e.currentTarget).parents("._productTypeBox").find("input._selectInfo[type='text']")
      const $SelectList = $(e.currentTarget).parents("._pickProType").find(".inputS input")
      let allData = []
      $SelectList.each(function () {
        allData.push($(this).attr('eleName'))
      });
      allData.shift()  //去除 '全部' 元素
      if (nowEleName === "全选") {
        let inputVal = "";
        if (checkStatus) {
          allData.forEach((str, i) => {
            inputVal += str;
            i !== allData.length - 1 && (inputVal += ",");
          })
        }
        $Content.val(inputVal)
        $SelectList.each(function (index, element) {
          element.checked = checkStatus
        })

      } else {
        let getInput = $Content.val()
        if (checkStatus) {
          let newValue = getInput ? `${getInput},${nowEleName}` : nowEleName;
          $Content.val(newValue)
        } else {
          let arr = getInput.split(",");
          arr.splice(
            arr.findIndex((v) => v == nowEleName),
            1
          );
          $Content.val(arr.join(","))
        }
      }
      this.queryData()
    },