js复选框实现全选，反选的功能

项目中有遇到这个功能，百度了一个差不多都是点击全选的时候下面的全部选中，在点击的时候，下面的取消选中，但是。。。。。。他们忽略了一点，那就是点击下面的时候，也要实现全选的勾选与不勾选，所以，我用自己的方法做了处理，实现了全选与反选的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <input type="checkbox" onclick="allClick(this);" id="all" />全选
        <div id="checkList">
            <input type="checkbox" value=""/>奇奇
            <input type="checkbox" value=""/>怪怪
            <input type="checkbox" value=""/>马马
            <input type="checkbox" value=""/>虎虎
        </div>
        <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script>
            /**
            *点击全选按钮的时候触发的事件
            */
            function allClick(obj){
                if($(obj).prop("checked")){
                    $("#checkList").find("input[type='checkbox']").prop("checked",true);
                }else{
                    $("#checkList").find("input[type='checkbox']").prop("checked",false);
                }
            }

            // 获取自己复选框长度
            var checkList = $("#checkList>input").length;

            /**
            *点击子集复选框的时候
            *获取选中的长度
            *选中的长度跟复选框长度对比，进而判断全选按钮是否勾选
            */

            $("#checkList>input").on('click',function(){
                var inputs = $("#checkList>input");
                var checkedCounts = 0;
                for(var i=0;i<inputs.length;i++){
                    if(inputs[i].checked){
                    checkedCounts++;
                    }
                }
                if (checkedCounts < checkList) {
                    $("#all").prop("checked",false);
                }
                else{
                    $("#all").prop("checked",true);
                }
            })
        </script>
</body>
</html>

注：代码直接复制过去，换个jquery.js就可以用了。

原文链接：https://blog.csdn.net/qq_36509946/article/details/103388998