使用jQuery完成CheckBox的全选和反选演示

在做网页项目的时候经常会遇到一些表单的填写，表单填写的时候自然会用到复选框。下面是一个简单的使用jQuery完成CheckBox的全选和反选功能的案例，希望能够帮到初学者。

使用方法

首先在HTML中先引入jquery.min.js

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

HTML结构

<input type="checkbox" id="all"/>全选
<button id="invert">反选</button>
<br/><br/>
<input type="checkbox" name="webObj"/>jquery<br/>
<input type="checkbox" name="webObj"/>html<br/>
<input type="checkbox" name="webObj"/>css<br/>
<input type="checkbox" name="webObj"/>web<br/>

JavaScript代码

    // 全选
    $("#all").on('click', function () {
        $("input[name='webObj']").prop("checked", this.checked);
    });
    // 反选
    $("#invert").on('click', function () {
        var $subs = $("input[name='webObj']");
        $subs.each(function () {
            $(this).prop('checked', !$(this).prop('checked'));
        })
        $("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
    });
    // 选中所有的选项之后，全选自动勾选
    $("input[name='webObj']").on('click', function () {
        var $subs = $("input[name='webObj']");
        $("#all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
    });

功能详解：
全选：点击选中所有的复选框
反选：点击反选之后，已选中的变为不选中状态，不选中的变为选中状态。并且选项存在不选中状态时，全选的复选框不选中。
选项点击：每次点击选项时判断选中的数目和所有选项的数目是否相等，相等则自动勾选全选，不相同则取消勾选