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要保持一致！！！

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

查看更多关于jquery实现全选功能的详细内容...