*{margin:0;padding:0;} ul{list-style:none;margin-top:20px;} .wrap{width:600px;margin:20px auto;} .clearfix{zoom:1;} .clearfix:after{content:".";width:0;height:0;visibility:hidden;clear:both;display:block;} .con{margin:10px;padding:10px;} li{float:left;margin-left:20px;padding:2px 6px;border:1px solid #ccc;cursor:pointer;position:relative;} s{display:none;width:12px;height:12px;position:absolute;bottom:0;right:0;background:url("sel.png") no-repeat;} li.sel{border:1px solid #c01110;} li.sel s{display:block;} .fl{float:left} .tit{margin-top:20px;}
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul{list-style:none;margin-top:20px;} .wrap{width:600px;margin:20px auto;} .clearfix{zoom:1;} .clearfix:after{content:".";width:0;height:0;visibility:hidden;clear:both;display:block;} .con{margin:10px;padding:10px;} li{float:left;margin-left:20px;padding:2px 6px;border:1px solid #ccc;cursor:pointer;position:relative;} s{display:none;width:12px;height:12px;position:absolute;bottom:0;right:0;background:url("sel.png") no-repeat;} li.sel{border:1px solid #c01110;} li.sel s{display:block;} .fl{float:left} .tit{margin-top:20px;} </style> </head> <body> <div class="wrap"> <div class="con"></div> <div class="clearfix"> <div class="tit fl">尺寸:</div> <ul class="ul0 gg fl clearfix"> <li><span>大号</span><s></s></li> <li><span>中号</span><s></s></li> <li><span>小号</span><s></s></li> </ul> </div> <div class="clearfix"> <div class="tit fl">材质:</div> <ul class="ul1 gg fl clearfix"> <li><span>丝绵</span><s></s></li> <li><span>纯棉</span><s></s></li> <li><span>亚麻</span><s></s></li> </ul> </div> <div class="clearfix"> <div class="tit fl">规格:</div> <ul class="ul2 gg fl clearfix"> <li><span>11</span><s></s></li> <li><span>22</span><s></s></li> <li><span>33</span><s></s></li> </ul> </div> <div class="btn" style="margin-top:20px;80px;height:30px;line-height:30px;text-align:center;border:1px solid #ccc;cursor:pointer;"> <a>提交</a></div> </div> </body> <script src="jquery-1.11.3.min.js"></script> </html>
$("ul").each(function(i){
$(this).on("click","li",function(){
var ht=$(".con").html();
$(this).addClass("sel");
$(this).siblings().removeClass("sel");
var $span="<span "+"class='ul"+i+"'>"+$(this).find("span").html()+"</span>";
var cla="ul"+i;
if($(".con span").hasClass(cla)==false){
if($(".con span").length==0){
$(".con").append($span);
}else{
$(".con").append(","+$span);
}
}else{
$(".con span").filter("."+"ul"+i).html($(this).find("span").html());
}
})
});
$(".btn").on("click",function(){
var len1=$(".gg").length;
var len2=$(".con span").length;
if(len1!=len2){
alert("请选择规格")
}else{
$(this).find("a").attr("href","http://www.baidu.com");
}
})