jquery如何實現全選功能

這篇文章主要介紹“jquery如何實現全選功能”，在日常操作中，相信很多人在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')
            }
        });

效果如下：

到此，關于“jquery如何實現全選功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！