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

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

搞定，收工！
有问题，请多指教！

转载于:https://www.cnblogs.com/midnight-visitor/p/6802944.html