div多选控制

此点击按钮，弹出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   ;

   		//显示日期多选div
   		function 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);//清空数组，数值最大31

				var 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>