jquery实现全选功能

本文实例为大家分享了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要保持一致！！！

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