<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>小可丶专用-复选框左右选择</title>
<script type="text/javascript" src="http://kuandai.cnool.net/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":checkbox").click(function(){
checkBgColor();
});
// 添加成员
$("#addCy").click(function(){
var fcy = $("#fcyList :checkbox:checked");
if(fcy.length){
fcy.attr("checked", false).parent().appendTo($("#cyList .content"));
checkBgColor();
}
});
// 移除成员
$("#delCy").click(function(){
var cy = $("#cyList :checkbox:checked");
if(cy.length){
cy.attr("checked", false).parent().appendTo($("#fcyList .content"));
checkBgColor();
}
});
// 全选
$(".controller #checkAllChk").click(function(){
$(this).parents(".cyList").find(":checkbox").attr("checked", true);
checkBgColor();
});
// 反选
$(".controller #reverseChk").click(function(){
$(this).parents(".cyList").find(":checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
checkBgColor();
})
});
checkBgColor();
})
function checkBgColor(){
$(":checkbox").parent().css("background-color", "");
$(":checkbox:checked").parent().css("background-color", "#f9b87e");
}
</script>
<style>
#mainList{width: 624px; margin: 40px auto; text-align: center;}
#mainList *{margin: 0px; padding: 0px;}
#mainList a{color: blue;text-decoration: none;}
#mainList a:hover{color: red;}
#mainList .title{color: blue; text-align: left;}
#mainList .content{width: 240px;_height: 200px;min-height: 200px;margin:0 auto;text-align: left;}
#mainList .content label{margin: 0 5px;}
#mainList .controller{text-align: left;}
#mainList .cyList{padding: 10px;text-align: center;border: 1px solid lightblue;overflow-x:hidden;y: scroll;}
#mainList .cyList span{float: left;white-space: nowrap;margin-left: 5px;}
#mainList #leftDiv, #mainList #rightDiv{float: left;}
#mainList #btnsDiv{float: left;width: 90px; margin: 95px 5px;}
#mainList #btnsDiv input{width: 60px;border: 1px solid lightblue;height: 24px;margin: 3px 0;}
#mainList #btnsDiv input:hover{background-color: lightblue;}
#mainList #cyList{background-color: #fffec0;}
#mainList #fcyList{background-color: #eeefff;}
</style>
</head>
<body>
<div id="mainList">
<h2>人员操作</h2>
<div id="leftDiv">
<div class="title">成员</div>
<div id="cyList" class="cyList">
<div class="content">
<span><input id="cy_chk1" name="chengyuan" type="checkbox" /><label for="cy_chk1">成员一</span></label>
<span><input id="cy_chk2" name="chengyuan" type="checkbox" /><label for="cy_chk2">成员二</span></label>
<span><input id="cy_chk3" name="chengyuan" type="checkbox" /><label for="cy_chk3">成员三</span></label>
<span><input id="cy_chk4" name="chengyuan" type="checkbox" /><label for="cy_chk4">成员四</span></label>
<span><input id="cy_chk5" name="chengyuan" type="checkbox" /><label for="cy_chk5">成员五</span></label>
<span><input id="cy_chk6" name="chengyuan" type="checkbox" /><label for="cy_chk6">成员六</span></label>
<span><input id="cy_chk7" name="chengyuan" type="checkbox" /><label for="cy_chk7">成员七</span></label>
<span><input id="cy_chk8" name="chengyuan" type="checkbox" /><label for="cy_chk8">成员八</span></label>
<span><input id="cy_chk9" name="chengyuan" type="checkbox" /><label for="cy_chk9">成员九</span></label>
</div>
<div class="controller">
<a id="checkAllChk" href="javascript:void(0);">全选</a> | <a id="reverseChk" href="javascript:void(0);">反选</a>
</div>
</div>
</div>
<div id="btnsDiv">
<input id="addCy" type="button" value="<< 添加" />
<input id="delCy" type="button" value="移除 >>" />
</div>
<div id="rightDiv">
<div class="title">未分类成员</div>
<div id="fcyList" class="cyList">
<div class="content">
<span><input id="fcy_chk1" name="chengyuan" type="checkbox" /><label for="fcy_chk1">成员甲</span></label>
<span><input id="fcy_chk2" name="chengyuan" type="checkbox" /><label for="fcy_chk2">成员乙</span></label>
<span><input id="fcy_chk3" name="chengyuan" type="checkbox" /><label for="fcy_chk3">成员丙</span></label>
<span><input id="fcy_chk4" name="chengyuan" type="checkbox" /><label for="fcy_chk4">成员丁</span></label>
<span><input id="fcy_chk5" name="chengyuan" type="checkbox" /><label for="fcy_chk5">成员戊</span></label>
<span><input id="fcy_chk6" name="chengyuan" type="checkbox" /><label for="fcy_chk6">成员己</span></label>
<span><input id="fcy_chk7" name="chengyuan" type="checkbox" /><label for="fcy_chk7">成员庚</span></label>
<span><input id="fcy_chk8" name="chengyuan" type="checkbox" /><label for="fcy_chk8">成员辛</span></label>
<span><input id="fcy_chk9" name="chengyuan" type="checkbox" /><label for="fcy_chk9">成员壬</span></label>
</div>
<div class="controller">
<a id="checkAllChk" href="javascript:void(0);">全选</a> | <a id="reverseChk" href="javascript:void(0);">反选</a>
</div>
</div>
</div>
</div>
</body>
</html>
