有全选 多选 取消 功能的简单的日期选择
开发需要,管理系统要求,一个输入框只多选日期的某几天,不要年月日那种,没办法,没有现成的插件,只能自己搞,特此分享一下,由于匆忙,可以优化的地方,请留言指教!
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();
});
};
搞定,收工!
有问题,请多指教!