閑來沒事寫了個小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：> 是移動選中的，>>是移動全部。（第一個與第三個之間的反復移動）。代碼比較粗，沒多想。畢竟具體需求具體對待，簡單的寫一遍就好了，實際運用中自己去發揮。