jQuery 多选与清除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap4.5.min.css"/>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.selCon li,span{
display: inline-block;
border: 1px solid #333;
border-radius: 30px;
padding: 5px 10px;
margin-right: 10px;
margin-top: 16px;
cursor: pointer;
}
/*移入*/
.selCon li:hover{
border: 1px solid #0070ff;
color: #0070ff;
}
/*选中*/
.selCon li.selectss{
border: 1px solid #0070ff;
color: #fff;
background-color: #0070ff;
}
/*不可选*/
.selCon li.notSel,.selCon span.notSel{
border: 1px solid #cfcfcf;
color: #cfcfcf;
background-color: transparent;
cursor: not-allowed;
}
/*清除*/
.selCon span.closess{
border: 1px solid red;
color: #fff;
background-color: red;
}
/*查询*/
.selCon span.searchss{
border: 1px solid green;
color: #fff;
background-color: green;
}
</style>
<script type="text/javascript">
$(function(){
var lis = $(".selCon").find("li");
lis.attr("name","dataList");
$.each(lis,function(index,item){
if($(item).hasClass("notSel") || $(item).hasClass("clear")){
$(item).removeAttr("name");
}
})
var arrList = [];
$("[name='dataList']").click(function(){
if(!$(this).hasClass("selectss")){
$(this).addClass("selectss");
if(lis.hasClass("selectss")){
$(".clear").addClass("closess");
$(".clear").css("cursor","pointer");
$(".search").addClass("searchss");
$(".search").css("cursor","pointer");
$(this).each(function(index,item){
if($(item).hasClass("selectss")){
if($.inArray(item[index], arrList) == -1){
arrList.push($(this).text());
console.log(arrList,"00000000");
}
}
console.log(arrList,"1111111");
})
}
}else{
// $(this).removeClass("selectss");
if(!lis.hasClass("selectss")){
$(".clear").removeClass("closess");
$(".clear").css("cursor","not-allowed");
$(".search").removeClass("searchss");
$(".search").css("cursor","not-allowed");
}
}
})
//清除数据
$(".clear").click(function(){
if(lis.hasClass("selectss")){
lis.removeClass("selectss");
$(this).removeClass("closess");
$(".search").removeClass("searchss");
$(this).css("cursor","not-allowed");
arrList.splice(0,arrList.length); //清空数组
}
})
//数据查询
$(".search").click(function(){
console.log(arrList,"查询了");
})
})
</script>
</head>
<body>
<div class="m-4 p-4 d-flex justify-content-start border">
<div class="pt-3" style="white-space: nowrap;">
comon US:
</div>
<div class="selCon">
<ul>
<li class="notSel">实时卫星</li>
<li>今日热点</li>
<li>新闻</li>
<li>阿里1688</li>
<li>淘 宝</li>
<li>易购</li>
<li>地图卫星</li>
<li>酒店</li>
<span class="notSel clear" onclick="clear()">清除 X</span>
<span class="notSel search">查询</span>
</ul>
</div>
</div>
</body>
</html>
效果预览：
