此点击按钮，弹出DIV，div内容可以多项选择，点击确定，被选项回填至文本框。功能类似之前写过的一篇日期多选，不过是在其基础上，新增点击页面其他区域，隐藏div功能。

1.css部分代码

.multiData{position:relative;height: 28px;font-size:12px;
}
.multiData .selBtn{cursor:pointer;font-size:12px;
}
input.ipt{text-indent:4px;
}
.chk{padding:10px;border:1px solid #bbb;position:absolute;left:0px;top:28px;display: none;background:#fff;
}
.chk .days{width: 200px;margin:0 auto;
}
.chk .days>label{display:block;
}
.chk .days>label>div{display:inline-block;
}
.chk div.days span{margin-left:10px;display:inline-block;
}
.chkBtns{text-align:center;
}

2.js部分代码

    jQuery(document).ready(function($) {//点击弹出div外部区域，隐藏div$("body").bind('click', function() {  //浏览器兼容性 var e = e || window.event;  var elem = e.target || e.srcElement;  while (elem) { //循环判断至跟节点，防止点击的是div子元素   if ((elem.id && elem.id == 'chk1')||(elem.id && elem.id == 'chk2')) {  return;  }  elem = elem.parentNode;  }  $("[id^='chk']").hide();});      $("[id^='data']").unbind("click").on("click",function(){return false;});//跟踪分析部门selDates1("data2","chk2","btnAllChk2","chk2","btnInvert2","chk2","Sure2","ipt2","chk2","checkname1");           });//跟踪分析部门function selDates1(data1,data2,data3,data4,data5,data6,data7,data8,data9,data10){showData(data1,data2);//data1是button的id，data2是class是chk的div的id;Allchk(data3,data4);//data3全选按钮的id,data4是class是chk的div的id;Invert(data5,data6);///data5反选按钮的id,data6是class是chk的div的id;Sure(data7,data8,data9,data10);//data7确定按钮的id,data8是input的id,data9是class是chk的div的id,data10是追加的div内的input的name   ;//显示日期多选divfunction showData(data1,data2){$("#"+data1).click(function(){$("#chk2").hide();$("#chk1").hide();$("#"+data2).show();})};//全选  function Allchk(data3,data4){$("#"+data3).click(function () {  $("#"+data4+" input:checkbox").prop("checked", true);  });};  //反选  function Invert(data5,data6){$("#"+data5).click(function () {   $("#"+data6+" input:checkbox").each(function () {  this.checked = !this.checked;     }) });  };// 选中数据时数组去重Array.prototype.unique = function(){var res = [];var json = {};for(var i = 0; i < this.length; i++){if(!json[this[i]]){res.push(this[i]);json[this[i]] = 1;}}return res;};//数据按照数值大小排序function sortNumber(a,b){return a - b};// 确定按钮function Sure(data7,data8,data9,data10){var vals=[];$("#"+data7).click(function(){ vals.splice(0,31);//清空数组，数值最大31var valIds=[];$("input[name="+data10+"]").each(function(){if(this.checked){vals.push($(this).val());valIds.push($(this).prop('alt'));}else{valIds.push();}})var res = vals.unique();   $("#"+data8).val(res.sort(sortNumber));$("#"+data9).hide();});};    }

3.html部分代码

    <div class="multiData"><input type="text" name="dept" id="ipt2" class="form-control ipt"><button type="button" id="data2" class="selBtn">选择部门</button><div id="chk2" class="chk"><div class="days" id="days2"><label for='1'><input type='checkbox' name='checkname1' id="1" value="张老大"><span>张老大</span></label><label for='2'><input type='checkbox' name='checkname1' id="2" value="张老二"><span>张老二</span></label><label for='3'><input type='checkbox' name='checkname1' id="3" value="张老三"><span>张老三</span></label></div><div class="chkBtns"><button type="button" id="btnAllChk2">全选</button><button type="button" id="btnInvert2">反选</button><button type="button" id="Sure2">确定</button></div></div>
</div>