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

牧小七

于 2024-04-25 11:38:14 发布

阅读量713

点赞数 16

分类专栏： JavaScript 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/gc666888/article/details/138184070

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery为一组复选框实现全选和取消全选功能，当全选按钮被选中时，所有子项会被选中；反之，取消任何一项将导致全选按钮取消选中。

摘要由CSDN通过智能技术生成

介绍

使用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()
    })
})