jquery全选全不选、反选功能

全选全不选、反选功能：jquery

    <input type="checkbox" name="interest"> 篮球 <br>
    <input type="checkbox" name="interest"> 读书 <br>
    <input type="checkbox" name="interest"> 电影 <br>
    <input type="checkbox" name="interest"> 阅读 <br>
    <hr>
    <input type="checkbox" id="selectAllOrNot" name="selectAllOrNot"> 全选/全不选
    <button onclick="reverseCheck()">反选</button>

实现功能代码如下：

<script>
    $('#selectAllOrNot').change(function() {
        // 获取 ”全选/全不选“ 本身的状态， true或者false
        var status = this.checked;
        // 通过prop将所有被选中的 input进行状态改变。
        $('input[name="interest"]').prop('checked', status);
    })
    // 反选功能
    function reverseCheck() {
        var flag = true;
        $('input[name="interest"]').each((index, dom) => {
            // dom.checked 指的是当前遍历的checkbox的选中状态 true, false
            var status = dom.checked;  //获取当前遍历的dom的选中状态
            $(dom).prop('checked', !status); // 将每个 “兴趣" 的状态取反
            if(status) {
                flag = false;
            }
        });
        $('#selectAllOrNot').prop('checked', flag);
    }

    /*
     * 通过jquery的方式，那么给一组 checkbox 绑定事件，可以一次性绑定，不用
     * 像js那样，一个个遍历单独绑定
     */
     $('input[name="interest"]').change(function() {
        $('#selectAllOrNot').prop('checked', $('input[name="interest"]').length ==  $('input[name="interest"]:checked').length);
    })
</script>