jquery實現(xiàn)全選功能

更新時間：2022年07月08日 15:12:06 作者：小小小菜鳥1997

這篇文章主要為大家詳細介紹了jquery實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)全選功能的具體代碼，供大家參考，具體內(nèi)容如下

話不多說，直接上代碼：

html代碼：

<div class="item-box">
? ? ? ? ?<div class="item-title">
? ? ? ? ? ? ? ?<div class="titleBox">
? ? ? ? ? ? ? ? ? <span>行業(yè)</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>電網(wǎng)</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>

關(guān)鍵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;
?}

方法：

// 行業(yè)全選點擊事件
? ? ? ? $('#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')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? });
? ? ? ? // 行業(yè)復選點擊事件
? ? ? ? $("#industrySelectItem>div").click(function () {
? ? ? ? ? ? $(this).toggleClass('active')
? ? ? ? ? ? var hasClass = $(this).hasClass('active')
? ? ? ? ? ? if (!hasClass) {
? ? ? ? ? ? ? ? $(this).removeClass('selectActive')
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? $(this).addClass('selectActive')
? ? ? ? ? ? }
? ? ? ? });

效果如下：