html布局:
<div class="mutiSelect"> <span>街道列表</span> <div class="list"> <p class="content">请选择</p> </div> <ul class="listContent"> <li><input class="all" id="all" type="checkbox">全选</li> <li><input class="street" type="checkbox" name="street" value="1"> 街道1</li> <li><input class="street" type="checkbox" name="street" value="2"> 街道2</li> <li><input class="street" type="checkbox" name="street" value="3"> 街道3</li> <li><input class="street" type="checkbox" name="street" value="4"> 街道4</li> <li><input class="street" type="checkbox" name="street" value="5"> 街道5</li> </ul> </div>
css样式
*{padding:0;margin:0;}
ul li,input{list-style: none;}
.mutiSelect{width:50%;position: relative;margin:12px 0;text-indent: 3%;}
.mutiSelect span{width:20%;height:25px;line-height:25px;display: block;position: absolute;top:0;font-size: 16px;color:#000;}
.mutiSelect .list{width:30%;height:25px;line-height:20px;border:1px solid #a3bbc1;position: absolute;top:0;left:20%;}
.mutiSelect .list p{width:100%;height:25px;line-height:25px;}
.listContent{position: absolute;left:20%;width:30.2%;top:25px;display: none;}
.listContent li{width:100%;border:1px solid #a3bbc1;box-sizing: border-box;border-top: none;line-height: 25px;}
jquery
<script>
var flag=true;
var num=0;
var isc='';
$(".content").click(function(){
if(flag){
flag=false;
$(".listContent").show();
isc=''
}else{
flag=true;
$(".listContent").hide();
for(var i=0;i<$(".street").length;i++){
if($(".street").eq(i).is(':checked')){
isc +=$(".street").eq(i).val()+",";
num++;
}
};
if(num>0){
$(".content").text("街道/镇")
}else{
$(".content").text("请选择")
}
console.log(isc);
}
});
// 全选按钮设置
$("#all").click(function(){
if( $(this).is(':checked')){
$(".street").prop("checked",true);
}else{
$(".street").prop("checked",false);
}
});
</script>