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>

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