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>

巴特西

div多选控制

最新文章

热门文章