日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jquery實現全選功能_jquery

作者：小小小菜鳥1997 ? 更新時間： 2022-09-01 編程語言

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

原文鏈接：https://blog.csdn.net/HuLuWa1997/article/details/119808926

欄目分類
最近更新