<!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>
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
