您现在的位置是:
首页 >
文章 >
常见的全选,全不选,反选样式
常见的全选,全不选,反选样式
小美女 2020-07-31 暂无评论 技术,前端 20
做了一个博客列表的管理页面,其中就用到了全选和全不选,删除的功能,我是用jQuery做的,特意把他们整理了出来,等以后可以随时拿出来看看。
先拿出我的html来吧
<div>
<input type="checkbox" class="select" />百度<br>
<input type="checkbox" class="select" />网易<br>
<input type="checkbox" class="select" />新浪<br>
<input type="checkbox" class="select" />淘宝<br>
<input type="checkbox" class="select" />微博<br>
<input type="checkbox" class="select" />快手<br>
</div>
<input type="checkbox" value="全选" id="selectAll"/>全选
<input type="checkbox" value="反选" id="reverseSelect"/>反选
全选,全不选效果实现
$(".selectAll").click(function(){
// 判断是否被选中状态
if(this.checked) {
$(".select").prop("checked",true);
}else {
$(".select").prop("checked",false);
}
});
反选效果实现
$(".reverseSelect").click(function(){
$(".select").each(function() {
$(this).prop("checked", !$(this).prop(checked));
})
});
当下面的选项全部被选中后总选框也被选中,下面任意一项没有被选中,则总选框不被选中
var allLength = $(".select").length;
$(".select").each(function() {
$(this).bind("click", function() {
var selectedLength = $(".select:checked").length;
if(selectedLength == allLength){
$(".selectAll").prop("checked", true);
}else{
$(".selectAll").prop("checked", false);
}
})
});
当选中下面其中任意一个或多个时,被选中项按钮是被选中状态
$(".select").each(function(){
$(this).bind("click",function(){
if ($(".select:checked").length >= 1) {
$(".selectAll").prop("checked", true);
}else{
$(".selectAll").prop("checked", false);
};
});
});
瞅我来气不?用红包砸死我吧
赞赏作者
扫一扫支付

