这篇文章主要介绍“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如何实现全选功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
