赞赏作者
扫一扫支付
韶华小苑 |

时光不负终不老

您现在的位置是: 首页 >

常见的全选,全不选,反选样式

常见的全选,全不选,反选样式

作者:小美女 日期:2020-07-31 点击:0

做了一个博客列表的管理页面,其中就用到了全选和全不选,删除的功能,我是用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);
        };
    });
});

最后修改时间:2020-07-31 17:01:34

瞅我来气不?用红包砸死我吧