可以复用的checkbox

最新推荐文章于 2022-01-25 14:15:09 发布

原创最新推荐文章于 2022-01-25 14:15:09 发布 · 489 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现全选与反选功能的方法，并详细解释了如何通过监听子项选择状态来更新全选按钮的状态。同时，还介绍了如何获取当前已选中的复选框数量。

//全选与反选
$("#checkAll").click(function () {
    if(this.checked ==  true){
        $('[type=checkbox]').prop('checked', true);
    }else{
        $('[type=checkbox]').prop('checked', false);
    }
})

//获取全部已经选中的checkbox个数
$("input[type='checkbox']:checked").length;

//子checkbox的全部选中对全选的影响
$(".son").click(function () {
    //总的checkbox的个数
    var len =   $(".son").length;
    //已选中的checkbox的个数
    var checkedLen  =   $("input[type='checkbox'][name='checked_goods']:checked").length;
    alert(checkedLen);
    if(len  ==  checkedLen){
        $('#checkAll').prop('checked', true);
    }else{
        $('#checkAll').prop('checked', false);
    }
})