广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jquery实现全选功能
  • 199
分享到

jquery实现全选功能

2024-04-02 19:04:59 199人浏览 泡泡鱼
摘要

本文实例为大家分享了Jquery实现全选功能的具体代码,供大家参考,具体内容如下 话不多说,直接上代码: html代码: <div class="item-box">  

本文实例为大家分享了Jquery实现全选功能的具体代码,供大家参考,具体内容如下

话不多说,直接上代码:

html代码:

<div class="item-box">
         <div class="item-title">
               <div class="titleBox">
                  <span>行业</span>
               </div>
                    <div class="select-all" id="industrySelectAll">
                        <input type="checkbox" id="selectAll1">
                        <label for="selectAll1"></label>
                        <span>全部</span>
                 </div>
          </div>
          <div class="tab-item selectItem" id="industrySelectItem">
               <div class="quotaitem itemSelect">
                     <span>电力</span>
               </div>
           <div class="quotaItem itemSelect">
                    <span>钢铁</span>
            </div>
            <div class="quotaItem itemSelect">
                    <span>电网</span>
            </div>
            <div class="quotaItem itemSelect">
                    <span>化工</span>
            </div>
            <div class="quotaItem itemSelect">
                    <span>石化</span>
            </div>
            <div class="quotaItem itemSelect">
                    <span>造纸</span>
            </div>
            <div class="quotaItem itemSelect">
                    <span>建材</span>
            </div>
            <div class="quotaItem itemSelect">
                    <span>有色</span>
          </div>
     </div>
</div>

关键CSS代码:

.content-wrap-show .con .item-box .selectItem .selectActive::after {
     content: '';
     position: absolute;
     width: 0.475rem;
     height: 0.5rem;
     background: url("../img/selectimg.svg")no-repeat;
     background-size: 100% 100%;
     display: inline-block;
     *zoom: 1;
     bottom: 0;
     right: 0;
 }
 .content-wrap-show .con .item-box .selectItem .active {
     border-color: #45FFF8;
 }
 .content-wrap-show .con .item-box .selectItem .selectActive {
     position: relative;
 }
 #selectAll1+label {
     width: .6rem;
     height: .6rem;
     border: 1px solid #293773 !important;
     background-color: #0f1b52 !important;
     display: inline-block;
     *display: inline;
     *zoom: 1;
     position: relative;
     top: 6px;
     left: 0;
     border-radius: 4px;
     cursor: pointer;
     overflow: hidden;
 }
 #selectAll1[type=checkbox] {
     visibility: hidden;
 }
 #selectAll1+label{
     z-index: 9;
 }
 #selectAll1:checked+label:before {
     content: '\2713';
     width: .45rem;
     height: .45rem;
     display: block;
     color: #ffffff;
     text-align: center;
     font-weight: bolder;
     position: absolute;
     top: 0px;
     left: 1px;
 }

方法:

// 行业全选点击事件
        $('#industrySelectAll>#selectAll1').click(function () {
            $(this).toggleClass('active')
            var hasClass = $(this).hasClass('active')
            $('#industrySelectItem .itemSelect').each(function () {
                if (!hasClass) {
                    $(this).removeClass('selectActive')
                } else {
                    $(this).addClass('selectActive')
                }
            })
        });
        // 行业复选点击事件
        $("#industrySelectItem>div").click(function () {
            $(this).toggleClass('active')
            var hasClass = $(this).hasClass('active')
            if (!hasClass) {
                $(this).removeClass('selectActive')
            } else {
                $(this).addClass('selectActive')
            }
        });

效果如下:

需要注意的是input的id和label的for要保持一致!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: jquery实现全选功能

本文链接: https://www.lsjlt.com/news/153916.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery实现全选功能
    本文实例为大家分享了jquery实现全选功能的具体代码,供大家参考,具体内容如下 话不多说,直接上代码: html代码: <div class="item-box">  ...
    99+
    2022-11-13
  • jquery怎么实现全选功能
    使用jquery实现全选功能的方法:1.新建html项目,引入jquery;2.创建input多选框;3.添加button按钮,绑定onclick点击事件;4.通过标签名获取input对象,使用prop()方法实现全选;具体步骤如下:首先,...
    99+
    2022-10-13
  • jquery如何实现全选功能
    这篇文章主要介绍“jquery如何实现全选功能”,在日常操作中,相信很多人在jquery如何实现全选功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery如何实现全选功能”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-02
  • js, jQuery如何实现全选、反选功能
    这篇文章给大家分享的是有关js, jQuery如何实现全选、反选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。js ,jq实现全选、反选功能:js:思路:1.点击全选按钮实现...
    99+
    2022-10-19
  • jQuery如何实现全选、反选和不选功能
    这篇文章给大家分享的是有关jQuery如何实现全选、反选和不选功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。HTML我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框...
    99+
    2022-10-19
  • jquery如何实现筛选功能
    这篇文章主要介绍jquery如何实现筛选功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! jquery实现筛选功能的方法:1、使用jquery的appe...
    99+
    2022-10-19
  • vue实现全选功能
    本文实例为大家分享了vue实现全选功能的具体代码,供大家参考,具体内容如下 全选思路 1、准备标签,样式,js,准备数据 2、将数据循环展示在页面上, 在li 里v-for 3、在全...
    99+
    2022-11-12
  • jQuery如何实现选项卡功能
    这篇文章主要介绍了jQuery如何实现选项卡功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果图:代码如下:<!DOCTYPE&n...
    99+
    2022-10-19
  • 如何实现jQuery多选框功能
    这篇文章主要介绍如何实现jQuery多选框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Jquery多选框的基本操作:支持全选、反选、取消全选的功能HTML正文:<inpu...
    99+
    2022-10-19
  • jQuery实现嵌套选项卡功能
    本文实例为大家分享了jQuery实现嵌套选项卡功能的具体代码,供大家参考,具体内容如下 知识点总结: 1.siblings():兄弟元素,获得匹配集合中每个元素的同胞,通过选择器进行...
    99+
    2022-11-12
  • JavaScript实现全选或反选功能
    本文实例为大家分享了JavaScript实现全选或反选功能的具体代码,供大家参考,具体内容如下 代码如下 <!DOCTYPE html> <html lang=...
    99+
    2022-11-12
  • JavaScript实现复选框全选功能
    本文实例为大家分享了JavaScript实现复选框全选的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="e...
    99+
    2022-11-12
  • jQuery实现全部购物车功能实例
    目录一、全选二、增减商品数量三、修改商品小计四、计算总计和总和五、删除商品 六、选中商品添加背景七、html 全部核心代码今天是一些购物车的基本功能实现,全选、增减商品数量、修改商品...
    99+
    2022-11-12
  • JavaScript如何实现全选功能
    本篇内容介绍了“JavaScript如何实现全选功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现全选的原理在学习如何实现全选功能之前,...
    99+
    2023-07-06
  • thinkphp如何实现全选功能
    这篇“thinkphp如何实现全选功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“thinkphp如何实现全选功能”文章吧...
    99+
    2023-07-04
  • javascript实现点击全选功能
    在网页设计和开发中,常常需要选中多个复选框或条目。手动选中每个复选框或条目是一件非常费时费力的事情,特别是当选项数量很多时。为了解决这个问题,开发人员可以添加一个“点击全选”按钮,以便用户可以轻松地选中所有选项。在本文中,我们将探讨如何使用...
    99+
    2023-05-21
  • jQuery中如何实现套选项卡功能
    本篇内容主要讲解“jQuery中如何实现套选项卡功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery中如何实现套选项卡功能”吧!siblings():兄弟元素,获得匹配集合中每个元素的...
    99+
    2023-06-20
  • Jquery怎么实现更多选项的功能
    这篇文章主要介绍“Jquery怎么实现更多选项的功能”,在日常操作中,相信很多人在Jquery怎么实现更多选项的功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Jquery...
    99+
    2022-10-19
  • JavaScript怎么实现复选框全选功能
    这篇文章主要介绍了JavaScript怎么实现复选框全选功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下代码:<!DOCTYPE html>...
    99+
    2023-06-14
  • Vue怎么实现全选及反选功能
    本篇内容介绍了“Vue怎么实现全选及反选功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先就是自己创建一个input,正在mx.txt的...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作