有全选 多选 取消 功能的简单的日期选择


开发需要,管理系统要求,一个输入框只多选日期的某几天,不要年月日那种,没办法,没有现成的插件,只能自己搞,特此分享一下,由于匆忙,可以优化的地方,请留言指教!
1、先来html代码

<div class="multiData">
	<input type="text" name="" id="ipt" class="ipt">
	<button type="button" id="data">选择日期</button>
	<div id="chk" class="chk">
		<div class="days">
			<input type='checkbox' name='checkname' value='1'><span>1</span> 
			<input type='checkbox' name='checkname' value='2'><span>2</span> 
			<input type='checkbox' name='checkname' value='3'><span>3</span> 
			<input type='checkbox' name='checkname' value='4'><span>4</span> 
			<input type='checkbox' name='checkname' value='5'><span>5</span> 
			<br/>
			<input type='checkbox' name='checkname' value='6'><span>6</span> 
			<input type='checkbox' name='checkname' value='7'><span>7</span>
			<input type='checkbox' name='checkname' value='8'><span>8</span> 
			<input type='checkbox' name='checkname' value='9'><span>9</span> 
			<input type='checkbox' name='checkname' value='10'><span>10</span>
			<br/> 
			<input type='checkbox' name='checkname' value='11'><span>11</span> 
			<input type='checkbox' name='checkname' value='12'><span>12</span> 
			<input type='checkbox' name='checkname' value='13'><span>13</span> 
			<input type='checkbox' name='checkname' value='14'><span>14</span> 
			<input type='checkbox' name='checkname' value='15'><span>15</span>
			<br/> 
			<input type='checkbox' name='checkname' value='16'><span>16</span> 
			<input type='checkbox' name='checkname' value='17'><span>17</span> 
			<input type='checkbox' name='checkname' value='18'><span>18</span> 
			<input type='checkbox' name='checkname' value='19'><span>19</span> 
			<input type='checkbox' name='checkname' value='20'><span>20</span>
			<br/> 
			<input type='checkbox' name='checkname' value='21'><span>21</span> 
			<input type='checkbox' name='checkname' value='22'><span>22</span> 
			<input type='checkbox' name='checkname' value='23'><span>23</span> 
			<input type='checkbox' name='checkname' value='24'><span>24</span> 
			<input type='checkbox' name='checkname' value='25'><span>25</span>
			<br/> 
			<input type='checkbox' name='checkname' value='26'><span>26</span> 
			<input type='checkbox' name='checkname' value='27'><span>27</span> 
			<input type='checkbox' name='checkname' value='28'><span>28</span> 
			<input type='checkbox' name='checkname' value='29'><span>29</span>
			<input type='checkbox' name='checkname' value='30'><span>30</span>
			<br/> 
			<input type='checkbox' name='checkname' value='31'><span>31</span> 
		</div>
		<div class="btns">
			<button type="button" id="btnAllChk">全选</button>
			<button type="button" id="btnAllNotChk">全不选</button>
			<button type="button" id="btnInvert">反选</button>
			<button type="button" id="Sure">确定</button>
		</div>
	</div>
</div>

2、接下来是style样式

	.multiData{
		position:relative;
		width: 250px;
		height: 28px;
		font-size:12px;
	}
	.multiData button{
		cursor:pointer;
		font-size:12px;
	}
	input.ipt{
		text-indent:4px;
	}
	.chk{
		padding:15px;
		border:1px solid #bbb;
		position:absolute;
		right:8px;
		top:28px;
		display: none;
	}
	.chk .days{
		width: 210px;
		margin:0 auto;
	}
	.chk div.days>span{
		text-align:center;
		width: 18px;
		display:inline-block;
	}
	.btns{
		text-align: center;
		margin-top:15px;
	}

3、重头戏是js代码

	$(document).ready(function(){
		showData();//显示日期多选div
		Allchk();//全选
		Allnot();//全不选
		Invert();//反选
		Sure();//确定
	});
	//显示日期多选div
	function showData(){
		$("#data").click(function(){
			$("#chk").show();
		})
	};
	//全选  
  	function Allchk(){
  		$("#btnAllChk").click(function () {  
	        $("#chk input:checkbox").attr("checked", "checked");  
	    });
  	};  
    //全不选  
    function Allnot(){
    	$("#btnAllNotChk").click(function () {  
        	$("#chk input:checkbox").removeAttr("checked");  
	    });
    };
    //反选  
  	function Invert(){
  		$("#btnInvert").click(function () {   
	        $("#chk 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(){
  		var vals=[];
  		$("#Sure").click(function(){ 
  			vals.splice(0,31);//清空数组,数值最大31
			$("input[name='checkname']:checkbox:checked").each(function(){ 
				vals.push($(this).val());
			});
		var res = vals.unique();   
		$("#ipt").val(res.sort(sortNumber));
		$("#chk").hide();
  		});
    };   

搞定,收工!
有问题,请多指教!

posted @ 2017-05-03 17:20  飞天龙猫  阅读(419)  评论(0编辑  收藏  举报