关于javascript操作checkbox的问题

下面是两个checkbox,请问各位高手如何通过javascript在按下“添加选中角色”后，将左边checkbox1中的已选项，添加到右边的checkbox2中；如何在按下“删除选中角色”按钮后，将右边checkbox2中的已选项删除的动态功能。
<table cellspacing="0" cellpadding="0">
<tr>
<th scope="col"><strong>可分配权限</strong></th>
<th scope="col" class="secondth"><strong>已分配权限</strong></th>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="1" disabled>系统管理员</td>
<td class="secondtd"><input  type="checkbox" name="checkbox2"  value="1">系统管理员</td>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="2" >航班信息管理员</td>
<td class="secondtd"><input  type="checkbox" name="checkbox2"  value="6">普通用户</td>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="3" >机场设施信息管理员</td>
<td class="secondtd"> </td>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="6"  disabled>普通用户</td>
<td class="secondtd"> </td>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="8" >清洁工</td>
<td class="secondtd"> </td>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="10" >用户管理员</td>
        <td class="secondtd"> </td>
</tr>
<tr>
<td class="firsttd"><input type="checkbox" name="checkbox1" value="11" >超人</td>
        <td class="secondtd"> </td>
</tr>
<tr>
<td>
<button type="submit" name="add" onclick="">添加选中角色</button>
</td>
<td>
<button type="submit" name="delete" onclick="">删除选中角色</button>
</td>
</tr>
</table>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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">
    <script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnAdd").click(function(){
var obj=[];
$("#divLeft ul").find(":checkbox[checked='true']").each(function(){
obj.push("<li><input type='checkbox' value='"+$(this).val()+"'/>"+$(this).next().text()+"</li>");
$(this).attr({"disabled":true,"checked":false});
});

for(var i=0,len=obj.length;i<len;i++){
$("#divRight ul").append(obj[i]);
}
});

$("#btnDelete").click(function(){
$("#divRight ul").find(":checkbox[checked='true']").each(function(){
var value=$(this).val();
$("#divLeft ul").find(":checkbox[disabled='true']").each(function(){
if($(this).val()==value){
$(this).attr("disabled",false);
}
});
$(this).parent().remove();
});
});
});
</script>
</head>
<body>
<div id="divLeft" style="float:left">
<h4>可分配权限</h4>
<ul style="list-style:none; margin:0; padding:0;">
<li><input type="checkbox" value="1" disabled/><label>系统管理员</label></li>
<li><input type="checkbox" value="2"/><label>航班信息管理员</label></li>
<li><input type="checkbox" value="3"/><label>机场设施信息管理员</label></li>
<li><input type="checkbox" value="6" disabled/><label>普通用户</label></li>
<li><input type="checkbox" value="8"/><label>清洁工</label></li>
<li><input type="checkbox" value="10"/><label>用户管理员</label></li>
<li><input type="checkbox" value="11"/><label>超人</label></li>
</ul>
</div>
<div id="divRight" style="float:left;margin-left:20px;">
<h4>已分配权限</h4>
<ul style="list-style:none; margin:0; padding:0;">
<li><input type="checkbox" value="1"/><label>系统管理员</label></li>
<li><input type="checkbox" value="6"/><label>普通用户<label/></li>
</ul>
</div>
<p style="clear:both;padding-top:30px;"><button type="button" id="btnAdd">添加选中角色</button>
<button type="button" id="btnDelete">删除选中角色</button></p>
</td>
</tr>
</table>
</body>
</html>导入jQuery1.4，，直接运行看效果。
没时间了，只写一个添加操作～
<script type="text/javascript">
function addItems() {
var items = document.getElementsByName('checkbox1');
for (i = 0; i < items.length; i ++) {
if (items[i].parentNode.className == 'firsttd' && items[i].checked == true) {
var tmp = document.getElementsByTagName('td');
for (j = 0; j < tmp.length; j ++) {
if (tmp[j].className == 'secondtd' && tmp[j].innerHTML == ' ') {
tmp[j].innerHTML = items[i].parentNode.innerHTML;
break;
}
}
items[i].className = 'toRemove';
}
}
while(true) {
items = document.getElementsByName('checkbox1');
var counter = false;
for (i = 0; i < items.length; i ++) {
if (items[i].className == 'toRemove') {
counter = true;
items[i].parentNode.innerHTML = ' ';
break;
}
}
if (!counter) break;
}
}
</script>