点击单选框，旁边出现一个div，并把值赋到div

来源：互联网发布：2017大型网络手机游戏编辑：程序博客网时间：2024/04/25 08:33

<html>

<head>

//浏览器判断

var Browser = {

'isIE' : (navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0),

'isFirefox' : navigator.userAgent.indexOf('Firefox') >= 0,

'isOpera' : navigator.userAgent.indexOf('Opera') >= 0

};

//获取鼠标绝对位置

function mouseCoords(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

function closeDiv(){

document.getElementById("chooseInfo").style.display = "none";

}

//显示对比窗口

function getMouseXY(checkBox,e){

e = e || window.event;

var mousePos = mouseCoords(e);

var x = mousePos.x;

var y = mousePos.y;

var div = document.getElementById("chooseInfo");

var ul = document.getElementById("infoList");

var li = ul.getElementsByTagName("li");

div.style.display = "block";

div.setAttribute("class","chooseInfoStyle");

div.style.top = y;

div.style.left = x + 20;

if(checkBox.checked){

ul.appendChild(createInfoElement(checkBox.value));

}else{

for(var i = 0;i < li.length;i++){

if(li[i].getElementsByTagName("input")[0].value == checkBox.value){

ul.removeChild(li[i]);

break;

}

//删除节点

function removeInfoElement(){

var checkBox = document.getElementsByTagName("input");

for(var i = 0;i < checkBox.length;i++){

if(checkBox[i].getAttribute("type") == "checkbox" && checkBox[i].value == arguments[1] && checkBox[i].checked){

checkBox[i].checked = false;

}

var ul = document.getElementById("infoList");

ul.removeChild(arguments[0].parentNode);

}

//添加选中商品信息

function createInfoElement(){

var li = document.createElement("li");

var input = document.createElement("input");

input.setAttribute("type","hidden");

input.setAttribute("value",arguments[0]);

if(Browser.isIE){

var text = document.createElement("<span style=/"float:left;clear:left;/"></span>")

text.innerHTML = arguments[0];

var a = document.createElement("<a href=/"#/" onclick=/"removeInfoElement(this,/'" + arguments[0] + "/');return false;/" style=/"float:right;clear:right/"></a>");

a.innerHTML = "删除"

}else{

var text = document.createTextNode(arguments[0]);

var a = document.createElement("a");

a.setAttribute("href","#");

a.setAttribute("onclick","removeInfoElement(this,/'" + arguments[0] + "/');return false;");

a.setAttribute("style","float:right;clear:right;");

a.innerHTML = "删除";

}

li.appendChild(input);

li.appendChild(text);

li.appendChild(a);

return li;

}

</script>

.chooseInfoStyle{

width:150px;

height:100px;

border:1px solid black;

display:block;

position:absolute;

left:10px;

top:10px;

z-index:5;

font-size:14px;

}

.close{

display:none;

}

#divHead{

height:18px;

background:#CCCCCC;

padding:1px;

}

#chooseInfo ul{

list-style:none;

margin-left:10px;

margin-top:5px;

padding:0;

}

#chooseInfo ul li{

width:130px;

border:1px solid #CCCCCC;

}

</style>

</head>

<body>

</div>

<div>

<ul id="infoList">.

</ul>

</div>

</body>

</html>