jQuery实现复选框全选和取消全选功能

介绍

使用jQuery实现复选框全选和取消全选功能，在全选状态取消其中一项勾选时，全选按钮会自动取消勾选，所有项全部单独勾选上时，全选按钮也会自动勾选

效果展示

示例代码

html代码

<div class="box">
        <input type="checkbox" onclick="checkAll(this)" id="checkboxAll" />全选
        <hr>
        <div>
            <input type="checkbox" class="checkbox" />互联网<br>
            <input type="checkbox" class="checkbox" />科技<br>
            <input type="checkbox" class="checkbox" />健康<br>
            <input type="checkbox" class="checkbox" />探索<br>
            <input type="checkbox" class="checkbox" />视野<br>
        </div>
    </div>

js代码

//全选/取消全选
function checkAll(obj) {
    if ($(obj).prop('checked')) {
        $('.checkbox').prop('checked', true);
    } else {
        $('.checkbox').prop('checked', false);
    }
}
//全选按钮选中/取消
function aaa() {
    var checkboxLen = $('.checkbox').length
    var checkedLen = $('.checkbox:checked').length
    if (checkboxLen == checkedLen) {
        $("#checkboxAll").prop('checked', true);
    } else {
        $("#checkboxAll").prop('checked', false);
    }
}
$(function () {
    //监听子项选中/取消
    $('.checkbox').change(function () {
        aaa()
    })
})

源码地址

https://gitee.com/u.uu.com/js-test/blob/master/2024-04-25/index.html