DropDownCheckList 纯javascript 打造

//function createPayTypeDIV(obj, hidobj) {
//    var id = obj.id; //传入自身对象
//    var hidid = hidobj.id;
//    var joinStr = ""; //拼接div里的内容
//    var leftpx = $("#" + id).offset().left; //  + $("#" + id).width();
//    var toppx = $("#" + id).offset().top + 17; // $("#" + id).height();


//    newDiv = document.createElement("div"); //创建div
//    newDiv.style.position = "absolute"; //relative
//    newDiv.style.backgroundColor = "#ffffff";
//    newDiv.style.width = "142px";
//    newDiv.id = "PayTypeDiv";
//    newDiv.style.border = "#a9ccde 1px solid";
//    newDiv.style.top = toppx + "px";
//    newDiv.style.left = leftpx + "px";
//    newDiv.style.fontSize = "12px";
//    newDiv.style.lineHeight = "25px"
//    newDiv.style.padding = "0px"
//    newDiv.style.zIndex = "0"
//    newDiv.style.visibility = "visible"; //hidden
//    newDiv.style.opacity = "1";
//    newDiv.style.filter = "alpha(opacity=100)"


//    newDiv.style.display = "none";
//    newDiv.innerHTML = "<input type=\"checkbox\" checked id=\"allPayType\" onclick=\"selectCheckBoxes('" + id + "','" + hidid + "',this)\" />全部<br/> " +
//                                    "<input type=\"checkbox\" checked id=\"0\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>现金<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"11\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>银联手机<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"1\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>信用卡<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"2\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>汇款<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"3\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>转帐<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"4\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>网上<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"5\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>挂账<br/>" +
//                                    "<input type=\"checkbox\" checked id=\"13\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>现金账户<br/>";
//    document.body.appendChild(newDiv); //把创建好的div插入到body节点后，否则newDiv会处于游离状态，无法显示；
//}



$(function () {
    var id = document.getElementById('txPayType');
    var hidid = document.getElementById('hidPayType');
    var optionshtml = "<input type=\"checkbox\" checked id=\"allPayType\" onclick=\"selectCheckBoxes('" + id + "','" + hidid + "',this)\" />全部<br/> " +
                                    "<input type=\"checkbox\" checked id=\"0\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>现金<br/>" +
                                    "<input type=\"checkbox\" checked id=\"11\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>手机<br/>" +
                                    "<input type=\"checkbox\" checked id=\"1\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>信用卡<br/>" +
                                    "<input type=\"checkbox\" checked id=\"2\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>汇款<br/>" +
                                    "<input type=\"checkbox\" checked id=\"3\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>转帐<br/>" +
                                    "<input type=\"checkbox\" checked id=\"4\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>网上<br/>" +
                                    "<input type=\"checkbox\" checked id=\"5\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>挂账<br/>" +
                                    "<input type=\"checkbox\" checked id=\"13\" onclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>现金账户<br/>";

    var $html = $(optionshtml);
    $("#PayTypeDiv").append($html);
    //设置
    var leftpx = $("#txPayType").offset().left;    //  + $("#" + id).width();
    var toppx = $("#txPayType").offset().top + 17; // $("#" + id).height();
    $("#PayTypeDiv").css({ left: leftpx, top: toppx, "width": "10%", "z-index": "998", "position": "absolute", "background": "#ffffff", "width": "80px", "border": "#a9ccde 1px solid", "line-height": "25px", "padding": "0px", "zIndex": "0", "border": " #a9ccde 1px solid", "z-index": "0", "display": "none" });
    // loadSelectedPayType(id, hidid);
    $("#txPayType").click(function (e) {
        ButtonShow();
    });
    document.onmousemove = mouseouthide;
});



/***点击文本框显示div****/
function ajaxButton() {
    if (document.getElementById("PayTypeDiv")) {
        if (document.getElementById("PayTypeDiv").style.display == "none") {
            document.getElementById("PayTypeDiv").style.display = "block";
        }
        return;
    }

}

/***使用jquery 替换 
点击文本框显示div****/
function ButtonShow() {
    var $paytypediv = $("#PayTypeDiv");
    if ($paytypediv.is(":visible")) {
        $paytypediv.hide();
    }
    else {
        $paytypediv.show();
    }
}






function mouseouthide() {
    var b = 20; //加一点余量，否则当点击文本框时div没弹出就被隐藏了
    var obj = document.getElementById("PayTypeDiv"); //poplist是弹出div的ID号
    if (obj != null) {
        var t = document.body.offsetTop;
        var l = document.body.offsetLeft;
        var ol = l + obj.offsetLeft - b;  //div元素到浏览器左边距离-20
        var or = l + obj.offsetLeft + obj.offsetWidth + b; //div元素到浏览器左边距离+div宽度+20
        var ot = t + obj.offsetTop - b;   //div元素到浏览器头部距离-20;
        var ob = t + obj.offsetTop + obj.offsetHeight + b; //div元素到浏览器头部+div高度+20
        var x = event.clientX + document.body.scrollLeft;  //获取鼠标的距离+浏览器变宽
        var y = event.clientY + document.body.scrollTop;
        if (x <= ol || x >= or || y <= ot || y >= ob) //根据上面的距离隐藏div元素
            obj.style.display = "none";
    }
}

function selectCheckBoxes(objid, hidid, payType) {

    var inputs = document.getElementById('PayTypeDiv').getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = payType.checked;
        }
    }



    getPayTypeInfo(objid, hidid);
}
function selectOneCheckBox(objid, hidid, payType) {



    var allPayType = document.getElementById('allPayType');
    if (!payType.checked) {
        allPayType.checked = false;
    }
    else {
        var inputs = document.getElementById('PayTypeDiv').getElementsByTagName("input");
        var selectAllPayType = true;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type == 'checkbox' && inputs[i].id != 'allPayType') {
                if (!inputs[i].checked) {
                    selectAllPayType = false;
                    break;
                }
            }
        }
        allPayType.checked = selectAllPayType;
    }
    checkNoSelected(payType);
    getPayTypeInfo(objid, hidid);

}

//验证是否有选中
function checkNoSelected(obj) {
    var inputs = document.getElementById('PayTypeDiv').getElementsByTagName("input");
    var noChecked = true;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'checkbox' && inputs[i].checked) {
            noChecked = false;
        }
    }
    if (noChecked) {
        alert('必须选择一项支付方式！');
        obj.checked = true;
    }
}

//获取checkboxlist ID
function getCheckBoxesVal() {
    var inputs = document.getElementById('PayTypeDiv').getElementsByTagName("input");
    var payTypeStr = '';

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'checkbox' && inputs[i].checked) {

            if (inputs[i].id == 'allPayType') {
                break;
            }
            else {
                payTypeStr += inputs[i].id + ',';
            }
        }
    }


    return trimEnd(payTypeStr, ',');
}

//获取文本
function getPayTypeInfo(objid, hidid) {

    var selectPayType = getCheckBoxesVal();
    var payTypeList = selectPayType.split(',');
    var payTypeStr = "";
    for (var i = 0; i < payTypeList.length; i++) {
        switch (payTypeList[i].toString()) {
            case '':
                payTypeStr += "全部";
                break;
            case '0':
                payTypeStr += "现金,";
                break;
            case '11':
                payTypeStr += "银联手机,";
                break;
            case '1':
                payTypeStr += "信用卡,";
                break;
            case '2':
                payTypeStr += "汇款,";
                break;
            case '3':
                payTypeStr += "转帐,";
                break;
            case '4':
                payTypeStr += "网上,";
                break;
            case '5':
                payTypeStr += "挂账,";
                break;
            case '13':
                payTypeStr += "现金账户,";
                break;

        }
    }

    payTypeStr = trimEnd(payTypeStr, ',')
    $("#txPayType").val(payTypeStr);
    $("#hidPayType").val(selectPayType);
}

//去掉最后的,元素
function trimEnd(oldStr, char) {
    var lastIndex = oldStr.lastIndexOf(char);
    if (lastIndex > -1) {
        oldStr = oldStr.substring(0, lastIndex) + oldStr.substring(lastIndex + 1, oldStr.length);
    }
    return oldStr;
}

function loadSelectedPayType(obj, hidobj) {

    if ($("#" + hidobj.id).val() == '')
        return;
    var payTypeList = $("#" + hidobj.id).val().split(',');
    var inputs = document.getElementById('PayTypeDiv').getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = false;
        }
    }
    for (var m = 0; m < payTypeList.length; m++) {
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type == 'checkbox') {
                if (inputs[i].id == payTypeList[m]) {
                    inputs[i].checked = true;
                }
            }
        }
    }
    getPayTypeInfo(obj.id, hidobj.id);
}