jQuery-复选框左右选择效果

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4 <title>小可丶专用-复选框左右选择</title>
  5 <script type="text/javascript" src="http://kuandai.cnool.net/js/jquery-1.6.2.min.js"></script>
  6 <script type="text/javascript">
  7 $(document).ready(function(){
  8     $(":checkbox").click(function(){
  9         checkBgColor();
 10     });
 11     // 添加成员
 12     $("#addCy").click(function(){
 13         var fcy = $("#fcyList :checkbox:checked");
 14         if(fcy.length){
 15             fcy.attr("checked", false).parent().appendTo($("#cyList .content"));
 16             checkBgColor();
 17         }
 18     });
 19     // 移除成员
 20     $("#delCy").click(function(){
 21         var cy = $("#cyList :checkbox:checked");
 22         if(cy.length){
 23             cy.attr("checked", false).parent().appendTo($("#fcyList .content"));
 24             checkBgColor();
 25         }
 26     });
 27     // 全选
 28     $(".controller #checkAllChk").click(function(){
 29         $(this).parents(".cyList").find(":checkbox").attr("checked", true);
 30         checkBgColor();
 31     });
 32     // 反选
 33     $(".controller #reverseChk").click(function(){
 34         $(this).parents(".cyList").find(":checkbox").each(function(){
 35             $(this).attr("checked", !$(this).attr("checked"));
 36             checkBgColor();
 37         })
 38     });
 39     checkBgColor();
 40 })
 41 function checkBgColor(){
 42     $(":checkbox").parent().css("background-color", "");
 43     $(":checkbox:checked").parent().css("background-color", "#f9b87e");
 44 }
 45 </script>
 46 <style>
 47 #mainList{width: 624px; margin: 40px auto; text-align: center;}
 48 #mainList *{margin: 0px; padding: 0px;}
 49 #mainList a{color: blue;text-decoration: none;}
 50 #mainList a:hover{color: red;}
 51 #mainList .title{color: blue; text-align: left;}        
 52 #mainList .content{width: 240px;_height: 200px;min-height: 200px;margin:0 auto;text-align: left;}
 53 #mainList .content label{margin: 0 5px;}
 54 #mainList .controller{text-align: left;}
 55 #mainList .cyList{padding: 10px;text-align: center;border: 1px solid lightblue;overflow-x:hidden;y: scroll;}
 56 #mainList .cyList span{float: left;white-space: nowrap;margin-left: 5px;}
 57 #mainList #leftDiv, #mainList #rightDiv{float: left;}
 58 #mainList #btnsDiv{float: left;width: 90px; margin: 95px 5px;}
 59 #mainList #btnsDiv input{width: 60px;border: 1px solid lightblue;height: 24px;margin: 3px 0;}
 60 #mainList #btnsDiv input:hover{background-color: lightblue;}
 61 #mainList #cyList{background-color: #fffec0;}
 62 #mainList #fcyList{background-color: #eeefff;}
 63 </style>
 64 </head>
 65 <body>
 66 <div id="mainList">
 67     <h2>人员操作</h2>
 68     <div id="leftDiv">
 69         <div class="title">成员</div>
 70         <div id="cyList" class="cyList">
 71             <div class="content">
 72                 <span><input id="cy_chk1" name="chengyuan" type="checkbox" /><label for="cy_chk1">成员一</span></label>
 73                 <span><input id="cy_chk2" name="chengyuan" type="checkbox" /><label for="cy_chk2">成员二</span></label>
 74                 <span><input id="cy_chk3" name="chengyuan" type="checkbox" /><label for="cy_chk3">成员三</span></label>
 75                 <span><input id="cy_chk4" name="chengyuan" type="checkbox" /><label for="cy_chk4">成员四</span></label>
 76                 <span><input id="cy_chk5" name="chengyuan" type="checkbox" /><label for="cy_chk5">成员五</span></label>
 77                 <span><input id="cy_chk6" name="chengyuan" type="checkbox" /><label for="cy_chk6">成员六</span></label>
 78                 <span><input id="cy_chk7" name="chengyuan" type="checkbox" /><label for="cy_chk7">成员七</span></label>
 79                 <span><input id="cy_chk8" name="chengyuan" type="checkbox" /><label for="cy_chk8">成员八</span></label>
 80                 <span><input id="cy_chk9" name="chengyuan" type="checkbox" /><label for="cy_chk9">成员九</span></label>
 81             </div>
 82             <div class="controller">
 83                 <a id="checkAllChk" href="javascript:void(0);">全选</a> | <a id="reverseChk" href="javascript:void(0);">反选</a>
 84             </div>
 85         </div>
 86     </div>
 87     <div id="btnsDiv">
 88         <input id="addCy" type="button" value="<< 添加" />
 89         <input id="delCy" type="button" value="移除 >>" />
 90     </div>
 91     <div id="rightDiv">
 92         <div class="title">未分类成员</div>
 93         <div id="fcyList" class="cyList">
 94             <div class="content">
 95                 <span><input id="fcy_chk1" name="chengyuan" type="checkbox" /><label for="fcy_chk1">成员甲</span></label>
 96                 <span><input id="fcy_chk2" name="chengyuan" type="checkbox" /><label for="fcy_chk2">成员乙</span></label>
 97                 <span><input id="fcy_chk3" name="chengyuan" type="checkbox" /><label for="fcy_chk3">成员丙</span></label>
 98                 <span><input id="fcy_chk4" name="chengyuan" type="checkbox" /><label for="fcy_chk4">成员丁</span></label>
 99                 <span><input id="fcy_chk5" name="chengyuan" type="checkbox" /><label for="fcy_chk5">成员戊</span></label>
100                 <span><input id="fcy_chk6" name="chengyuan" type="checkbox" /><label for="fcy_chk6">成员己</span></label>
101                 <span><input id="fcy_chk7" name="chengyuan" type="checkbox" /><label for="fcy_chk7">成员庚</span></label>
102                 <span><input id="fcy_chk8" name="chengyuan" type="checkbox" /><label for="fcy_chk8">成员辛</span></label>
103                 <span><input id="fcy_chk9" name="chengyuan" type="checkbox" /><label for="fcy_chk9">成员壬</span></label>
104             </div>
105             <div class="controller">
106                 <a id="checkAllChk" href="javascript:void(0);">全选</a> | <a id="reverseChk" href="javascript:void(0);">反选</a>
107             </div>
108         </div>
109     </div>
110 </div>
111 </body>
112 </html>