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要保持一致！！！
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。