jquery实现全选功能
更新时间：2022年07月08日 15:12:06 作者：小小小菜鸟1997
这篇文章主要为大家详细介绍了jquery实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例为大家分享了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要保持一致！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了jQuery给元素添加样式的方法,结合实例形式详细分析了jQuery给元素添加样式的各种常见操作技巧,需要的朋友可以参考下2015-12-12
本文为大家详细介绍下通过jquery获取表单元素CheckBox、Radio等的值，有需求的朋友可以参考下，希望对大家有所帮助2013-07-07
这篇文章主要介绍了jQuery操作cookie的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要为大家详细介绍了jQuery实现调节字体大小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
很多网站上面有顶一下，踩一下效果是直接用别人做好的插件放上去的，上星期正好要用到这个效果，就去研究了下。下面就一步一步来实现整个效果。。。。2010-07-07
如何使用CSS3和JQuery easing 插件制作绚丽菜单
这篇文章主要介绍了如何使用CSS3和JQuery easing 插件制作绚丽菜单，这样做可以让有菜单的盒子滑出，并且弹出缩略图。在某些菜单项中我们还包含着有进一步链接的子菜单。取决于我们鼠标在菜单项上的停悬，子菜单将向左或向右滑动。,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了简述Jquery与DOM对象的相关资料,十分的简单实用，需要的朋友可以参考下2015-07-07
本文给大家分享的是使用jQuery插件animateSlide制作多点滑动幻灯片特效，十分的炫酷，有需要的小伙伴可以参考下2015-06-06
jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。通过本文给大家介绍JQuery+EasyUI轻松实现步骤条效果，需要的朋友参考下2016-02-02
这篇文章主要介绍了jQuery mobile开发中加载导航历史的方法,jQuery mobile是jQuery针对移动设备开发的JavaScript库,需要的朋友可以参考下2015-12-12
最新评论