$.ajax({
url:'<?= $getThirdList?>',
dataType : 'json',
data:{sid:sid},
success:function(data){
if(data.status == 1){
$('.third_ul').html('');
var html = '';
if(data.data.length > 0){
$.each(data.data, function (k, v) {
html += '<li><label><input lname="third_id" type="checkbox" name="third_id" value="'+v.id+'"><i></i><em>'+v.name+'</em></label></li>';
});
}
$('.third_ul').html(html);
$(".thirdDxs label").click(function(e) {
console.log(this);
var name = $(e.target).attr('lname'),
div_name = name + '_div',
txt = '',
vname = '';
// console.log($("input:checkbox[name='"+name+"']:checked"));
text = $("input:checkbox[name='"+name+"']:checked").nextAll('em').map(function(index,elem) {
txt = $(elem).html();
vname = txt.replace(" ├","");
vname = vname.replace(" │","");
return vname.replace(" └","");
}).get().join(',');
var leng = $("input:checkbox[name='"+name+"']:checked").length;
if(leng>4){
$('.'+div_name+' p').html('已选中 ' + leng + ' 项')
}else{
$('.'+div_name+' p').html(text);
}
});
}else{
$.dialog.tips(data.info, 2, 'error.gif');
}
},
cache:false
});
css:
<style>
.thirdDxs{width:700px;height:34px;margin:0;cursor:pointer;position:relative;z-index:9;}
.thirdDxs p{width:100%;box-sizing:border-box;border:1px solid #cbcbcb;height:34px;line-height:34px;text-indent:1em;color:#666;background:url(/images/o-mis-ico-select.jpg) 98% center no-repeat #fff;text-align:left;}
.thirdDxs ul{width:100%;box-sizing:border-box;border:1px solid #cbcbcb;border-top:0;display:none;background:#fff;max-height:200px;overflow: auto;}
.thirdDxs ul li{line-height:28px;border-bottom:1px solid #cbcbcb;color:#666;position:relative;}
.thirdDxs ul li:last-child{border-bottom:0;}
.thirdDxs ul li label{display:block;padding-left:30px;}
.thirdDxs ul li label em{font-style:normal;}
.thirdDxs ul li input{display:none;}
.thirdDxs ul li i{position:absolute;left:7px;top:5px;width:14px;height:14px;border:1px solid #aeaeae;border-radius:4px;background-color:#fff;}
.thirdDxs ul li input:checked + i{background-color: #11a911;border-color: transparent;background-repeat: no-repeat;background-position: center;}
</style>
结果:
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素 。
如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素,并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式,类型与我传递到 $() 函数中的相同。如果应用选择器,则将通过检测元素是否匹配来对它们进行筛选。