刚写的一个小案例，实现多选的添加及删除 

<!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" />
<style>
.userItem {
	width:80px;
	height:30px;
	line-height:30px;
	float:left;
	text-align:center;
	border:1px solid #0066CC;
	background:#F0F8FB;
	color:#003399;
	margin-right:10px;
	cursor:pointer
}
</style>
</head>

<body>

<div id="box" style="border:1px solid #CCC; width:600px; height:100px; padding:20px; background:#FEFDEF"></div>

<script language="javascript">
///待选用户JSON
var userJSON = {
	'3566' : { 'name':'张三', 'sex':'男' }, 
	'3567' : { 'name':'李四', 'sex':'女' }, 
	'3568' : { 'name':'王五', 'sex':'男' }, 
	'3569' : { 'name':'赵六', 'sex':'男' }, 
	'3570' : { 'name':'刘七', 'sex':'女' }
}
///已选用户JSON
var selUserJSON = {};

///添加用户
function addUser(uid){
	var userItem = document.createElement("DIV");
	userItem.id = uid;
	userItem.className = "userItem";
	userItem.innerHTML = userJSON[uid].name;
	userItem.onclick = function() { removeUser(this.id) } ;
	document.getElementById("box").appendChild(userItem);
	selUserJSON[uid] = userJSON[uid];
}

///移除用户
function removeUser(uid){
	if(selUserJSON[uid] != undefined){
		document.getElementById("box").removeChild(document.getElementById(uid));
		delete selUserJSON[uid];
	}
}
///查看已选择用户
function retSel(){
	var str = [];
	for(var i in selUserJSON){
		str.push("组员ID：" + i + ", 姓名：" + selUserJSON[i].name + "\t\n");
	}
	alert(str.join(""));
}

///添加或者移除用户
function clkUser(uid, chk){
	if (chk) addUser(uid);
	else removeUser(uid);
}

///显示备选用户列表
document.write("<hr/>");
document.write("请选择用户：<br/>");
for(var i in userJSON){
	var str = [];
	str.push("<input type='checkbox' id='chkUser_" + i + "' value='" + i + "' onclick='clkUser(this.value, this.checked)' />");
	str.push("<label for='chkUser_" + i + "'>" + i + "_" + userJSON[i].name + "</label><br/>");
	document.write(str.join(""));
}
document.write("<hr/>");
document.write("<input type='button' value='查看已选择用户' onclick='retSel()'/>");
</script>
</body>
</html>

 

posted @ 2012-12-03 16:57  网无忌  阅读(374)  评论(0)  编辑  收藏  举报