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

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

赞赏作者

扫一扫支付

 支付宝支付  微信支付