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>

效果预览：

 

posted @ 2021-01-26 22:55  芳香四溢713051  阅读(307)  评论(0)    收藏  举报