这个逻辑文字描述好像很复杂，具体到实践功能就知道我想表达的是什么了。把逻辑想通了，这个功能也就写出来了，demo如下：

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1890678

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><!--引用jquery--><scriptsrc="http://code.jquery.com/jquery-2.0.3.min.js"type="text/javascript"></script><styletype="text/css">*{margin:0px;padding:0px;list-style:none;}.list{padding:10px;border:solid1px#000000;width:500px;height:200px;margin-top:20px;}.listli{float:left;width:100px;border-bottom:dashed1px#C4C4C4;padding-bottom:5px;margin-top:20px;margin-left:20px;}.check{float:left;width:8px;height:8px;background:#FFFFFF;border:solid1px#000000;border-radius:50%;margin-top:5px;margin-right:10px;}.check.active{background:#000000;}.bottomli{}</style><scripttype="text/javascript">$(function(){vararr=[];//保存已经选中的项插入的对应的位置$(".check").on("click",function(){$(this).addClass("active");varlen=$(".top").find(".active").length;//已经选中的数量vartxt=$(this).parent().text();//要插入的内容if($(this).hasClass("active")&&ifExist()&&len<=4){//状态：如果已经选中而且之前没有插入过同时总数量小于限定数量，则执行如下$(".bottomli").each(function(){varcon=$(this).text();if(!con){arr[txt]=$(this).index();$(this).html(txt);returnfalse;}});}elseif($(this).hasClass("active")&&!ifExist()){//状态：如果已经选中，之前已经插入过，则执行如下$(this).removeClass("active");varindex=arr[txt];//读取当前选中之前插入的位置$(".bottomli").eq(index).html("");}else{$(this).removeClass("active");alert("最多只能选择4个");}functionifExist(){varresult;$(".bottomli").each(function(){//遍历插入列表中要插入选项是否存在，如果存在返回false,否则返回truevarcon=$(this).text();if(con!=txt){result=true;}else{result=false;returnfalse;}});returnresult;}});})</script></head><body><ulclass="listtop"><li><spanclass="check"></span>11111</li><li><spanclass="check"></span>22222</li><li><spanclass="check"></span>33333</li><li><spanclass="check"></span>44444</li><li><spanclass="check"></span>55555</li><li><spanclass="check"></span>66666</li></ul><ulclass="listbottom"><li></li><li></li><li></li><li></li></ul><script></script></body></html>