<form method="post" name='listform'>
<input type='checkbox' name='cselect' value='1'>
<input type='checkbox' name='cselect' value='2'>
<input type='checkbox' name='cselect' value='3'>
<input type="button" name="submit" value="search" onclick='checkValue();'> </input> </form>
<script language='javascript'>
function checkValue()
{
var strid=0;
var fxk=document.listform.cselect;
for (var uu=0;uu <fxk.length;uu++)
{
if (fxk[uu].checked)
{
strid += ":" + fxk[uu].value;
}
}
alert(strid);
return false;
}
</script>ff3 ie7 ie6测试通过
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var AlertBox = Class.create();
AlertBox.prototype = {
//
initialize: function(box, options) { var oThis = this;
this._touch = null;
this.Box = $(box);
this._timerShow = null;
this._timerHide = null;
this.SetOptions(options);
this.Delay = parseInt(this.options.Delay) || 0;
this.onShow = this.options.onShow;
this.Box.style.position = "absolute";
this.Box.style.visibility = "hidden";
addEventHandler(this.Box, "mouseover", function(){ oThis.Show(oThis._touch); })
addEventHandler(this.Box, "mouseout", function(e){ oThis.preHide(e); })
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Delay: 300,//延时
onShow: function(){}//显示时执行
};
Object.extend(this.options, options || {});
},
//准备显示
preShow: function(touch) {
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
var oThis = this; this._timerShow = setTimeout(function(){ oThis.Show(touch); }, this.Delay);
},
//显示
Show: function(touch) {
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
this.onShow();
touch._onshow();
var o = touch, iLeft = o.offsetLeft, iTop = o.offsetTop;
this._touch = o;
iTop += o.offsetHeight;
iLeft -= this.Box.offsetWidth/2 - o.offsetWidth/2;
while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }
this.Box.style.left = iLeft + "px";
this.Box.style.top = iTop + "px";
this.Box.style.visibility = "visible";
},
//准备隐藏
preHide: function(e) {
var oT = Event(e).relatedTarget;
if(!(this.Box.contains ? this.Box.contains(oT) || this.Box == oT : this.Box.compareDocumentPosition(oT) & 16)){
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
var oThis = this; this._timerHide = setTimeout(function(){ oThis.Hide(); }, this.Delay);
}
},
//隐藏
Hide: function(e) {
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
this.Box.style.visibility = "hidden";
//显示select
Each(document.getElementsByTagName("select"), function(o){ o.style.visibility = "visible"; });
},
//添加触发对象
Add: function(touch, onshow) {
var o = $(touch), oThis = this;
o._onshow = onshow || function(){};
addEventHandler(o, "mouseover", function(){ oThis.preShow(o); })
addEventHandler(o, "click", function(){ oThis.Show(o); })
addEventHandler(o, "mouseout", function(e){ oThis.preHide(e); })
}
};
</script>
<div id="idBox" class="box_list1" style="position: absolute; visibility: hidden; border:1px solid #000000;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="70px" valign="top">
退票规定：
</td>
<td id="idRef">
</td>
</tr>
<tr>
<td valign="top">
改票规定：
</td>
<td id="idChg">
</td>
</tr>
<tr>
<td valign="top">
签转规定：
</td>
<td id="idTkt">
</td>
</tr>
</table>
</div>
<span id="aaa">签转规定</span><script type="text/javascript">
var ab = new AlertBox("idBox");ab.Add($("aaa"))</script></body>
</html>
参考
<style type="text/css">
.f{
cursor:pointer;
position:absolute;
visibility:hidden;
z-index:1000;
width:357px;
height:194px;
padding:15px 0 0 50px;
background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)
}
.sug{cursor:default;color:#00f;}
</style>
<script>
function getPos(elm){
var e = elm, x = 0, y = 0;
while(e != null){
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {x: x+elm.offsetWidth, y: y};
}
function att_vis(){
var els = document.getElementsByTagName('*') || document.all, sugs = [];
for(var i=0; i<els.length; i++)
if(els[i].nodeType == 1 && els[i].className == 'sug') sugs.push(els[i]);
for(var i=0; i<sugs.length; i++){
sugs[i].sug = sugs[i].getAttribute('sug');
if(sugs[i].sug == null) continue;
sugs[i].onmouseover = function(){
sug_vis(this.sug, getPos(this));
} sugs[i].onmouseout = function(){
sug_hid();
}
}
} function sug_vis(str, pos){
if(!str)return document.sug.style.visibility = 'visible';
if(!document.sug){
var s = document.createElement('div');
s.className = 'f';
s.onmouseover = function(){
sug_vis(null);
}
s.onmouseout = function(){
sug_hid();
}
document.body.appendChild(s);
document.sug = s;
}
var sug = document.sug;
sug.innerHTML = str;
sug.style.left = pos.x;
sug.style.top = pos.y;
sug.style.visibility = 'visible';
} function sug_hid(){
document.sug.style.visibility = 'hidden';
} window.onload = att_vis;
</script>
<span class="sug" sug="<a href='#'>大法师</a><br>山丘之王<br>血法师<br>怕拉丁" >人族</span>中华人民共和国<span class="sug" sug="<a href='#'>飞鸟儿</a><br>傻了八鸡" >鸟儿族</span>
.f{
cursor:pointer;
position:absolute;
width:357px;
height:194px;
padding:15px 0 0 50px;
background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)
}
</style>
<script>
var IsIE=!!document.all;if(!IsIE)HTMLElement.prototype.contains=function(o){
while(o!=null){
if(o==this)return true;
o=o.parentNode;
}
return false;
}function create(){
var div =document.createElement("div")
div.className="f"
div.id="div"
div.innerHTML="<a href='#'>大法师</a><br>山丘之王<br>血法师<br>怕拉丁"
document.body.appendChild(div)
document.getElementById("div").style.left=event.clientX
document.getElementById("div").style.top=event.clientY
div.onmouseout=del//=============================
}function del(e){
e=e||event;
var obj=e.relatedTarget||e.toElement;
var div =document.getElementById("div")
if(div.contains(obj))return;
document.body.removeChild(div)
}
//document.onmouseout=del//=============================不要在这里加事件
</script>
<span id="text" onmouseover="create()" style="cursor:pointer;" >人族</span><br>