闲来没事写了个小demo，原本是回答别人博问的，有人比我更快的给出了链接，想想半途而废也不好，就写完了，写个博文记录一下（效果是按照我自己来的，可能和最早别人问的不太一样，反正无关紧要啦）
直接上code：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> table tr td { border: 1px solid black; width: 200px; height: 400px; } li { list-style: none; margin-top: 20px; } </style> </head> <body> <table> <tr> <td> <ul> <li><input type="checkbox" value="江西" />江西</li> <li><input type="checkbox" value="四川" />四川</li> <li><input type="checkbox" value="福建" />福建</li> <li><input type="checkbox" value="湖南" />湖南</li> </ul> </td> <td> <ul> <li><input id="right" type="button" value=">"></li> <li><input id="rightAll" type="button" value=">>"></li> <li><input id="left" type="button" value="<"></li> <li><input id="leftAll" type="button" value="<<"></li> </ul> </td> <td> <ul> </ul> </td> </tr> </table> </body> </html> <script> $(function () { $("#right").click(function () { $("td").eq(0).find("input:checked").each(function (i, e) { $("td").eq(2).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>"); $("td").eq(0).find("input:checked").parent().remove(); }); }); $("#rightAll").click(function () { $("td").eq(0).find("input").each(function (i, e) { $("td").eq(2).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>"); $("td").eq(0).find("input").parent().remove(); }); }); $("#left").click(function () { $("td").eq(2).find("input:checked").each(function (i, e) { $("td").eq(0).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>"); $("td").eq(2).find("input:checked").parent().remove(); }); }); $("#leftAll").click(function () { $("td").eq(2).find("input").each(function (i, e) { $("td").eq(0).find("ul").append("<li><input type='checkbox' value='" + $(e).val() + "' />" + $(e).val() + "</li>"); $("td").eq(2).find("input").parent().remove(); }); }); }); </script>
效果图：
Remarks：> 是移动选中的，>>是移动全部。（第一个与第三个之间的反复移动）。代码比较粗，没多想。毕竟具体需求具体对待，简单的写一遍就好了，实际运用中自己去发挥。