jquery仿淘宝做了一个多选框和大家分享下
<!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=utf-8" />
<title>无标题文档</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, p, blockquote, th, td { margin:0;
padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal; }
ol, ul, li { list-style:none; }
caption, th { text-align:left; }
a { text-decoration:none; }
body { background:#fff; }
.clear { clear:both; }
h1, h2, h3, h4, h5, h6, strong { font-size:100%; font-
weight:800;}
.screen{width:800px; margin:100px 0 0 100px; border:1px solid
#47b4eb; }
.checkedBox{width:770px;height:29px; border-bottom:1px solid
#47b4eb;background:#e7f1fe;padding:0 15px 0 15px; font-
size:12px;overflow:hidden;}
.checkedBox dt{color:#454444;line-height:28px;float:left;}
.checkedBox dd{float:left;padding:6px 8px 0 0;}
.checkedBox dd a{color:#608acc;background:url(1.gif) right
#fff no-repeat;overflow:hidden; display:block;
float:left;height:15px;line-height:15px;border:1px solid
#b4c6dc;padding:0 20px 0 5px;}
.checkedBox dd a:hover{color:#47b4eb;background:url(2.gif)
right #fff no-repeat;border:1px solid #79bfe2;}
.screenList{font-size:12px;padding:0 10px 0 10px;}
.screenItem{ width:780px; border-bottom:1px solid #999999; }
.screenItem dt{ float:left; line-height:28px;}
.screenItem dd{ float:left; line-height:28px; padding-
right:8px;}
.screenList a{padding-left:5px;}
</style>
<script language="javascript" type="text/javascript"
src="jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$(".screenList dl:last").attr("style","border-bottom:0px");
});
function addSel(obj){
var checkValue = obj.innerHTML;
var scBox = $(obj).parent().parent().attr("id");
$(".checkedBox").append("<dd><a href='#' onclick='delSel
(this,\"" + scBox + "\")'>"+ checkValue +"</a></dd>");
$(obj).parent().remove();
}
function delSel(obj,parentId) {
var checkValue = obj.innerHTML;
$("#" + parentId + " div").before("<dd><a href='#'
onclick='addSel(this)'>" + checkValue + "</a></dd>");
$(obj).parent().remove();
}
</script>
</head>
<body>
<div class="screen">
<dl class="checkedBox">
<dt>您已选择：</dt>
<dd><a href="#" onclick="delSel(this,'item1')">撞色</a></dd>
<dd><a href="#" onclick="delSel(this,'item1')">撞电线杆
</a></dd>
</dl>
<div class="screenList">
<dl class="screenItem" id="item1">
<dt>赠品A:</dt>
<dd><a href="#" onclick="addSel(this)">撞衫A</a></dd>
<dd><a href="#" onclick="addSel(this)">撞头A</a></dd>
<dd><a href="#" onclick="addSel(this)">撞脸A</a></dd>
<div class="clear"></div>
</dl>
<dl class="screenItem" id="item2">
<dt>赠品B:</dt>
<dd><a href="#" onclick="addSel(this)">撞衫B</a></dd>
<dd><a href="#" onclick="addSel(this)">撞头B</a></dd>
<dd><a href="#" onclick="addSel(this)">撞脸B</a></dd>
<div class="clear"></div>
</dl>
</div>
</div>
</body>
</html>
源代码：点击下载
