//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\" οnclick=\"selectCheckBoxes('" + id + "','" + hidid + "',this)\" />全部<br/> " +
// "<input type=\"checkbox\" checked id=\"0\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>现金<br/>" +
// "<input type=\"checkbox\" checked id=\"11\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>银联手机<br/>" +
// "<input type=\"checkbox\" checked id=\"1\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>信用卡<br/>" +
// "<input type=\"checkbox\" checked id=\"2\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>汇款<br/>" +
// "<input type=\"checkbox\" checked id=\"3\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>转帐<br/>" +
// "<input type=\"checkbox\" checked id=\"4\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>网上<br/>" +
// "<input type=\"checkbox\" checked id=\"5\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>挂账<br/>" +
// "<input type=\"checkbox\" checked id=\"13\" οnclick=\"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\" οnclick=\"selectCheckBoxes('" + id + "','" + hidid + "',this)\" />全部<br/> " +
"<input type=\"checkbox\" checked id=\"0\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>现金<br/>" +
"<input type=\"checkbox\" checked id=\"11\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>手机<br/>" +
"<input type=\"checkbox\" checked id=\"1\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>信用卡<br/>" +
"<input type=\"checkbox\" checked id=\"2\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>汇款<br/>" +
"<input type=\"checkbox\" checked id=\"3\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>转帐<br/>" +
"<input type=\"checkbox\" checked id=\"4\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>网上<br/>" +
"<input type=\"checkbox\" checked id=\"5\" οnclick=\"selectOneCheckBox('" + id + "','" + hidid + "',this)\"/>挂账<br/>" +
"<input type=\"checkbox\" checked id=\"13\" οnclick=\"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);
}
转载于:https://www.cnblogs.com/liuyong/archive/2011/06/24/2088644.html