<!--Before finding the right people, the only need to do is to make yourself good enough. longDD 201.4.11--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>左右选择框</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .box{ width: 200px; min-height: 300px; border: solid 3px #ccc; margin: 40px; border-radius:5px; float: left; } #box-footer{ width: 800px; min-height: 80px; padding: 10px; } .btn{ text-align: center; color: #fff; display: block; height: 30px; line-height: 30px; width: 100px; border: solid 1px #303030; background-color: #313131; border-radius:5px; margin: 10px; } .send-pos{ width:150px; margin-left: 20px; margin-top: 10px; line-height: 30px; display: block; } </style> </head> <body> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript"> $(function() { //加入 $('#add').click(function() { var arr = $('#box-left :input[checked="checked"]'); for (var i = 0; i < arr.length; i++) { if (!$('#box-right :input').is('[name=' + $(arr[i]).attr('name') + ']')) { $('<li>', {html: $($(arr)[i]).parent().html()}).appendTo('#box-right ul'); } } }); //删除 $('#del').click(function() { var arr = $('#box-right :input[checked="checked"]'); for (var i = 0; i < arr.length; i++) { $($(arr)[i]).parent().remove(); } }); //清空 $('#empty').click(function() { $('#box-right ul').html(''); }); }) </script> <div class="box" id="box-left"> <ul> <li class="cont"><input type="checkbox" name='position1'/><span>1.部门1</span></li> <li class="cont"><input type="checkbox" name='position2'/><span>2.部门2</span></li> <li class="cont"><input type="checkbox" name='position3'/><span>3.部门3</span></li> <li class="cont"><input type="checkbox" name='position4'/><span>4.部门4</span></li> <li class="cont"><input type="checkbox" name='position5'/><span>5.部门5</span></li> <li class="cont"><input type="checkbox" name='position6'/><span>6.部门6</span></li> </ul> </div> <div class="box"> <span class="btn" id="add">加入-》</span> <span class="btn" id="del">《-删除</span> <span class="btn" id="empty">清空</span> </div> <div class="box" id="box-right"> <ul> </ul> </div> <div class="box" id="box-footer"> 注意事项： 1.jquery 版本为1.7 2.本例为简单测试，但是大体思路已完成，如有其他需求，可自行添加
3.圆角border-radiu为css3属性，需要游览器支持
</div> </body> </html>