<!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>

效果预览：

jQuery 多选与清除的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  3. jQuery在线选座订座（影院篇）

    原文:jQuery在线选座订座(影院篇) 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选 ...

  4. JQuery 多选按钮checkbox

    JQuery 多选按钮checkbox 在需要全选和选择部分的时候我们就需要多选在这里主要介绍了具体的实现 JQuery $(function () { //全选或全不选 $("#allbo ...

  5. jQuery实现按Esc清除信息功能

    1.jQuery实现按Esc清除信息功能 function clearLogs(){    $(".logs").empty(); }   $(document).ready(fu ...

  6. Jquery全选系列操作（锋利的jQuery）

    Jquery全选系列操作(锋利的jQuery) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  7. Jquery复选框

    Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  8. jQuery在线选座订座（高铁版）

    除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选座.不同等级座 ...

  9. Thymeleaf+layui+jquery复选框回显

    一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

随机推荐

  1. Python----Flask Web框架（一）

    Flask是一个轻量级的基于Python的web框架. 本文适合有一定HTML.Python.网络基础的同学阅读. 1. 简介 这份文档中的代码使用 Python 3 运行.是的,所以读者需要自己在电 ...

  2. 腾讯云联合多家生态伙伴，重磅开源 SuperEdge 边缘容器项目

    在2020年12月19-20日腾讯 Techo Park 开发者大会上,腾讯云联合英特尔.VMware 威睿.虎牙.寒武纪.美团.首都在线,共同发布 SuperEdge 边缘容器开源项目. Super ...

  3. [leetcode]297. Serialize and Deserialize Binary Tree一般二叉树的编解码

    由于一般的前序遍历不能唯一的还原出原本你的二叉树,所以要改变一下: 记录二叉树的结构信息,也就是空节点用符号表示 一般的前序遍历只是记录了节点的前后顺序,通过记录空节点,每一层的结构就可以记录下来 解 ...

  4. 通过naa在esxi主机上找到物理磁盘的位置

    因为有一块磁盘告警,需要找到这个块磁盘.通过网络搜索就找到了这个shell脚本. 感谢 Jorluis Perales, VxRail TSE 2 shell脚本: # Script to obtai ...

  5. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

  6. 设计模式之SOLID原则

    介绍 设计模式中的SOLID原则,分别是单一原则.开闭原则.里氏替换原则.接口隔离原则.依赖倒置原则.前辈们总结出来的,遵循五大原则可以使程序解决紧耦合,更加健壮. SRP 单一责任原则 OCP 开放 ...

  7. python函数----名称空间和作用域

    一 名称空间 名称空间即存放名字与对象映射/绑定关系的地方. 对于x=3,Python会申请内存空间存放对象3,然后将名字x与3的绑定关系存放于名称空间中,del x表示清除该绑定关系. ​在程序执行 ...

  8. 九个最容易出错的 Hive sql 详解及使用注意事项

    阅读本文小建议:本文适合细嚼慢咽,不要一目十行,不然会错过很多有价值的细节. 文章首发于公众号:五分钟学大数据 前言 在进行数仓搭建和数据分析时最常用的就是 sql,其语法简洁明了,易于理解,目前大数 ...

  9. JAVA_基础反射创建运行时类的对象

    通过反射去创建对应的运行时类的对象 newInstance():调用此方法,创建对应的运行时类的对象.内部调用的是空参的构造器. 要想此方法正常的创建运行时类的对象,要求: 1.运行时类必须提供空参构 ...

  10. Docker学习笔记之创建安装了nginx服务器的镜像

    操作步骤: 1. 编辑Dockerfile 2. 使用build命令创建镜像 3. 使用run命令测试创建的镜像 编辑Dockerfile 首先,需要使用文本编辑器编辑Dockerfile文件(注意没 ...