本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！jquery+div ul li+css多选 如条件多选
收藏 
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jquery+div ul li+css实现多选 如条件多选</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function () { $("#suaibumen li").bind("click", function(){ if($(this).hasClass("cur")){ $(this).removeClass("cur"); } else{ $(this).addClass("cur"); } var va=""; $("#suaibumen li").each(function (index, element) { if($(this).hasClass("cur")){ va=va+$(this).attr("name")+","; } }); $("#shistr").val(va); }); }); </script> <style> .xuankl{width:80px;height:40px;line-height:40px;float:left;text-align:right;} .xuank{float:left;width:400px;margin-top:5px;} .suaibumen li{float:left;height:25px;line-height:25px;text-align:center;cursor:pointer; border:1px dashed #eee;color:#3e3c3c;overflow:hidden;width:100px;margin:2px;} .suaibumen li.cur{ border:1px dashed #014b92;color:#014b92;} .suaibumen li:hover{ color:#ff0000;} </style> </head> <body> <div style="margin-bottom:30px;"> <div class="xuankl">服务城市：</div> <div class="xuank"> <input type="hidden" id="shistr" name="shistr" value=""/> <ul class="suaibumen" id="suaibumen"> <li id="shili314" name="314">南宁</li> <li id="shili315" name="315">柳州</li> <li id="shili316" name="316">桂林</li> <li id="shili317" name="317">梧州</li> <li id="shili318" name="318">北海</li> <li id="shili319" name="319">防城港</li> <li id="shili320" name="320">钦州</li> <li id="shili321" name="321">贵港</li> <li id="shili322" name="322">玉林</li> <li id="shili323" name="323">贺州</li> <li id="shili324" name="324">百色</li> <li id="shili325" name="325">河池</li> <li id="shili477" name="477">崇左</li> <li id="shili478" name="478">来宾</li> <div style="clear:both"></div> </ul> </div> <div style="clear:both"></div> </div> </body> </html>
